Bagaimana Anda memudar dalam javascript?

Terkadang kami ingin konten kami tampil keren di halaman web. Untungnya, dengan menggunakan CSS dan HTML, kita dapat melakukannya dengan memudarkan sesuatu dengan mudah ke halaman. Hal pertama yang perlu kita lakukan adalah membuat halaman HTML seperti itu

<. DOCTYPE html>





#fademe{
kegelapan. 0;
transisi. 2 detik;
}

Masukkan saya.

jendela. memuat = fungsi(){
dokumen. getElementById(“fademe”). gaya. opasitas = 1;
}

Saat ini dijalankan, Anda akan melihat div, dengan teks di dalamnya, memudar ke halaman dalam 2 detik. Jika Anda ingin mempelajari lebih lanjut, pastikan untuk memeriksa Pelatihan HTML/CSS/JavaScript kami. Semoga harimu menyenangkan

Salah satu efek animasi yang populer dan sangat menarik adalah animasi Fade-in dan Fade-out, yang dapat diimplementasikan menggunakan JavaScript dan HTML\CSS

Langkah 1. Siapkan halaman dasar

Buat HTML baru di editor kode pilihan Anda, buat skrip. file js dan gaya. file css juga seperti yang ditunjukkan

Di dalam file HTML, tautkan file CSS dan skrip. js menggunakan baris berikut sebelum tag body

< jenis skrip =" module" src< . js" ="script.js"> skrip >
< tautan rel =" stylesheet" href< . css" ="style.css" />

Sekarang, kita akan menerapkan animasi fade-in pada sebuah gambar, dan untuk gambar tersebut, kita akan menggunakan gambar bebas royalti dari Unsplash. Anda dapat membuat tag gambar dan tombol yang akan kita gunakan untuk memudarkan dan memudarkan gambar dengan baris berikut

< tengah >
      < img
        id ="Gambar" src ="https://images.unsplash.com/photo-1640273837947-ea830d50c191?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80"
        alt =""
      />
      < br />
      < id tombol ="myButton">Fade Effectbutton>
    tengah >

Perhatikan bahwa kami telah memberikan id "Gambar" ke gambar dan id "myButton" ke tombol yang kami buat

Karena gambarnya cukup besar, kita akan mengatur tinggi dan lebar tertentu di file CSS menggunakan baris berikut

#gambar {
  tinggi . 200px ;
  lebar . 200px ;
}

Halaman Anda akan terlihat seperti ini

Kami memiliki gambar kami di tengah layar dan tepat di bawah gambar kami memiliki tombol kami

Langkah 2. Memodifikasi File CSS

Ada banyak cara untuk mengimplementasikan animasi tertentu menggunakan CSS dan JavaScript, tetapi untuk posting khusus ini kita akan bermain dengan kelas dan atribut opacity dari CSS. Ubah file CSS Anda dengan baris berikut

#gambar {
  opasitas . 1;
  transisi . opasitas 0. 3s kemudahan - masuk - keluar ;
  tinggi . 200px ;
  lebar . 200px ;
}
#gambar. memudar {
  opasitas . 0;
}

Untuk menjelaskan apa yang kita lakukan di baris di atas. Kami hanya menempatkan opacity gambar menjadi 100% di awal dan jika gambar tersebut memiliki kelas aktif "fade" maka opacity akan berubah menjadi 0%. Namun, perubahan opasitas ini akan terjadi dalam sebuah contoh, untuk membuat efek seperti animasi, kami menggunakan atribut transisi dan menyetelnya ke 0. 3 detik

Sekarang, yang perlu kita lakukan hanyalah menulis beberapa skrip yang akan mengalihkan kelas "Fade" dari gambar

Langkah 3. Beralih Kelas dengan JavaScript

Dalam naskah. js, pertama-tama kita akan mengambil elemen gambar dan menyimpannya di dalam variabel, lalu kita akan beralih kelas tetapi semua ini harus dilakukan setelah menekan tombol. Jadi, tambahkan baris berikut di file skrip

biarkan gambar = dokumen. getElementById("Gambar");
dokumen. getElementById("myButton").klik = fungsi () {
  gambar. DaftarKelas . alihkan("pudar");
};

Jadi, dengan ini kita harus bisa mengimplementasikan animasi fade-in dan transisi fade-out juga

Langkah 4. Menguji animasi kami

Langkah terakhir adalah menjalankan file HTML di mesin lokal kami dan menguji animasi saat menekan tombol, Anda akan melihat output berikut

Seperti yang Anda lihat di gif di atas bahwa animasi kami bekerja dengan sempurna

Kesimpulan

Animasi dapat dengan mudah diimplementasikan dengan menggunakan JavaScript bersama dengan HTML dan CSS untuk membuat halaman web terlihat jauh lebih menarik dan menarik. Dalam postingan ini, kita belajar cara membuat animasi fade-in dan fade-out pada elemen HTML dengan menetapkan properti CSS yang berbeda pada kelas elemen dan kemudian mengubah kelas menggunakan JavaScript

Bagaimana cara menambahkan animasi fade di JavaScript?

Bagaimana cara fadeOut kotak di JavaScript?

Bagaimana cara memudarkan div di JavaScript?