Membuat Effect Scroll Pada Logo

Di tutorial kali ini saya akan mengajarkan bagaimana caranya membuat Effect Animasi Scroll Pada logo menggunakan jQuery. Jadi maksud dari effect animasi ini adalah dimana saat kita scroll halaman website kita, maka kalian akan melihat perubahan warna pada logo jika melewati atau melintasi warna Background atau warna dasar yang memiliki warna yang berbeda-beda. Masih bingung teman-teman dari pada tambah bingung kita langsung buat saja effect nya ya teman-teman.

Pertama kalian bisa siapkan sebuah logo dengan ukuran berapa saja yang formatnya SVG.

Kemudain Kalian bisa buat HTML nya seperti gambar dibawah ini :

Bisa kalian lihat pada gambar diatas setiap image saya bungkus menggunakan tag <div> dan ditambahkan atribut class dengan 2 nama, nama yang pertama saya berikan nama main, nama main untuk mengatur width dan tinggi dari elemen main, sedangkan nama red untuk memberikan background-colornya.

Selanjutnya CSS nya seperti gambar dibawah ini :

Dan berikut adalah untuk jQuerynya :

Untuk file jQuery nya kalian bisa buat file Javascript kemudian kalian save dengan nama SlipScroll.js.

Kemudian kalian bisa save dan lihat hasilnya.

Download