Cara Menciptakan Efek Fade-In Pada Elemen Class, Id Dan Img

Cara Membuat Efek Fade-In Pada Elemen Class, ID dan IMG - Apa yang dimaksud dengan fade-in? Fade secara bahasa diterjemahkan sebagai menghilang atau lenyap secara perlahan, sedangkan "in" secara bahasa diterjemahkan "masuk", jadi efek fade-in sanggup diartikan sebagai muncul secara perlahan, begitu kira-kira.

Sekarang aku akan melanjutkan tutorial menciptakan efek fade-in ini, metode yang kita gunakan untuk menciptakan efek fade-in pada elemen <class>, <div id='name-id'> dan <img> yaitu dengan memanfaatkan jquery sederhana dengan ukuran yang sangat kecil, tetapi dengan jquery ini mempunyai kelebihan yaitu sanggup menerapkan efek fade-in ke beberapa elemen html secara bersamaan.
Pertama, pikirkan dan tentukan sasaran elemen yang akan diberi efek fade-in, jikalau sasaran elemen sudah di tentukan, tambahkan display:none pada css elemen tersebut.

Contoh:

Anggap saja elemen sasaran yaitu <div class='comments'> dan <img>, maka tambahkan css {display:none} pada kedua elemen tersebut menyerupai berikut;

.comments, img{display:none}

Langkah itu bermaksud untuk menyembunyikan sementara elemen target, kemudian jquery akan bekerja (memunculkan elemen secara perlahan kepermukaan) dikala seseorang men-scroll halaman anda, tapi sebelumnya tambahkan jquery berikut sempurna berada di atas tag epilog </body>.

<script>
$(window).scroll(function() {
   var hT = $('.comments, img').offset().top,
       hH = $('.comments, img').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
    $('.comments, img').fadeIn(3000);
   }
});
</script>

Ini mungkin terlihat menyerupai lazy load tapi sebetulnya bukan, kerana di browser elemen yang disembunyikan tetap dirender sebagaimana mestinya, tidak ada penundaan yang terjadi di browser pada elemen yang menjadi di target.

Rendering Path

Jika kau ingin menerapkan efek fade-in ini pada elemen "id" kau hanya perlu merubah id-target pada jquery dan css menyerupai teladan berikut;

<script>
$(window).scroll(function() {
   var hT = $('#name_id').offset().top,
       hH = $('#name_id').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
    $('#name_id').fadeIn(3000);
   }
});
<script>

Dan penerapan pada bab css yaitu menyerupai berikut;

#name_id{display:none}

Sangat sederhana bukan...! Cobalah sendiri dan ceritakan kepada admin bagaimana akibatnya melalui kolom komentar.