[ Desain Web ] Membuat Effect Fade-In saat Halaman di Scroll dengan CSS & jQuery - Animate, FadeIn, jQuery scroll, Scroll Effect, Window Scroll, web design, desain web, tutorial, cara membuat, cara agar, tutorial blogger, tutorial wordpress, cara wordpress, tips wordpress, tips blogger, optimasi wordpress, optimasi blogger, blogspot, kekinian, tamvan, sitamvan, si tamvan, milenial
[ Desain Web ] Membuat Effect Fade-In saat Halaman di Scroll dengan CSS & jQuery - Animate, FadeIn, jQuery scroll, Scroll Effect, Window Scroll, web design, desain web, tutorial, cara membuat, cara agar, tutorial blogger, tutorial wordpress, cara wordpress, tips wordpress, tips blogger, optimasi wordpress, optimasi blogger, blogspot, kekinian, tamvan, sitamvan, si tamvan, milenial

  1 Januari 2019     340 Orang yang kepo!

SiTamvan.com - Effect Fade-in jQuery yang saya share kali ini tanpa menggunakan plugin Animate.css hanya menggunakan properti css visible & opacity.

Edisi nyicil postingan, di awal tahun 2019.. setelah tahun kemarin 2018 posting Basic Pembuatan Efek Loading Page dengan jQuery. mimin tamvans ingin berbagi kode jQuery yang sudah mimin siapkan untuk membuat efek fade-in ketika pengunjung / user meng-scroll halaman website kita! iyaaa.. kita.. 😀

Buat temen-temen yang sudah pada tau efek ini, mungkin sudah tidak asing lagi.. hanya saja, disini saya hanya ingin berbagi buat mantemans yang sedang belajar, atau suatu saat saya lupa jadi tinggal copas gituuu.. hehe

Oke deh, kembali ke topik!

Silahkan scroll frame JsFiddle dibawah ini ( Ke Bawah & Ke Atas), perhatikan tulisan “Saya sedang Demo!” untuk melihat efek-nya :

Efek Fade-in ini sudah banyak digunakan oleh website yang menggunakan trik “Lazy Load” yang insya allah akan segera mimin bahas di postingan selanjutnya! so, jangan bosen buat mamvir ke blog ini! *maksa 😀

Cara Menerapkan Effect Fade-In saat Halaman di Scroll:

  1. Buka HTML Editor Website mantemans, cari kode </head> lalu simpan kode CSS berikut ini tepat diatas-nya! atau simpan di tempat CSS yang sudah mantemans siapkan..
    <style>
    .fadeIn {
    transition:2s;
    visibility:hidden;
    opacity:0;
    }
    .fadeIn.active {
    visibility:visible;
    opacity:1;
    }
    </style>
  2. Selanjutnya, cari kode </body> lalu simpan kode jQuery berikut ini juga tepat diatas-nya!
    $(window).scroll(function() {
    $('.fadeIn').each(function() {
    if ($(window).scrollTop() >= $(this).offset().top - $(window).height()) {
    $(this).addClass('active');
    } else {
    $(this).removeClass('active');
    }
    });
    });
  3. Terakhir.. tambahkan class="fadeIn" pada elemen yang akan diberi efek fade-in saat halaman di scroll! atau lihat contoh tag HTML yang sudah diberi class fadeIn berikut ini :
    <p class="fadeIn">Saya adalah Paragraph</p>
    <img class="fadeIn" src="../saya-adalah-gambar.jpg"/>

Sekian postingan tentang [ Desain Web ] Membuat Effect Fade-In saat Halaman di Scroll dengan CSS & jQuery, Jika ada pertanyaan jangan sungkan untuk Berkomentar dibawah postingan ini.

Terima kasih & Semoga bermanfaat. 😅😂

Request Tutorial? atau Pertanyaan diluar Topik? silahkan mampir Disini.
# # # # #

Kasih komen!