KontenWeb

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 dapat diartikan sebagai muncul secara perlahan, begitu kira-kira. Untuk memahami efek fade-in ini lebih jelas silahkan lihat contoh demo yang saya sediakan di bawah ini.
Demo FadeIn Sekarang saya akan melanjutkan tutorial membuat efek fade-in ini, metode yang kita gunakan untuk membuat efek fade-in pada elemen <class>, <div id='name-id'> dan <img> adalah dengan memanfaatkan jquery sederhana dengan ukuran yang sangat kecil, tetapi dengan jquery ini memiliki kelebihan yaitu dapat menerapkan efek fade-in ke beberapa elemen html secara bersamaan.

Pertama, pikirkan dan tentukan target elemen yang akan diberi efek fade-in, jika target elemen sudah di tentukan, tambahkan display:none pada css elemen tersebut.

Contoh:

Anggap saja elemen target adalah <div class='comments'> dan <img>, maka tambahkan css {display:none} pada kedua elemen tersebut seperti berikut;
[code type="CSS"].comments, img{display:none}[/code]
Langkah itu bermaksud untuk menyembunyikan sementara elemen target, kemudian jquery akan bekerja (memunculkan elemen secara perlahan kepermukaan) ketika seseorang men-scroll halaman anda, tapi sebelumnya tambahkan jquery berikut tepat berada di atas tag penutup </body>.
[code type="JQuery"]<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>[/code]
Ini mungkin terlihat seperti lazy load tapi sebenarnya 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 kamu ingin menerapkan efek fade-in ini pada elemen "id" kamu hanya perlu merubah id-target pada jquery dan css seperti contoh berikut;
[code type="JQuery"]<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>[/code]
Dan penerapan pada bagian css adalah seperti berikut;
[code type="CSS"]#name_id{display:none}[/code]
Sangat sederhana bukan...! Cobalah sendiri dan ceritakan kepada admin bagaimana hasilnya melalui kolom komentar.