Merubah background ketika scroll cukup menarik untuk diterapkan pada halaman website, hal ini bisa untuk menarik perhatian pengunjung website asalkan penggunaannya benar, soft, dan menggunakan warna yang sesuai.
Dengan bantuan jquery hal tersebut tidaklah sulit untuk diterapkan, cukup beberapa baris kita sudah bisa mendapatkan efek tersebut. Salah satu website yang sudah menerapkan trik seperti ini adalah website digital telepathy.
Artikel Terkait
Langsung saja kita buat terlebih dahulu dari struktur HTML
HTML
Disitu kita melihat ada ID #first, #two, #third, semunya sebenarnya tidak penting dalam membuat scroll, itu hanya digunakan untuk kepentingan klik pada menu, namun tidak ada pengaruhnya untuk efek scroll, jadi tidak perlu jadi perhatian.
CSS
Jquery
Inilah bagian yang paling penting untuk menciptakan efek perubahan warna ketika halaman website di scroll.
Disitu kita menggunakan fungsi scroll, dan memanfaatkan fungsi scrollTop() dari jquery untuk mengetahui posisi halaman yang dihitung dari halaman paling atas 0px. Disitu kita lihat ada angka 1600 dan 3200, itu maksudnya ketika posisi kita 1600 px dari atas maka background akan berubah, begitu juga ketika mencapai 3200px maka background berubah lagi, jika anda masih ingin lagi tinggal tentukan pada angka berapa lagi akan berubah warna.
DEMO | Download Script
Semoga tutorial ini bisa berguna untuk anda, membuat website yang sedang anda bangun menjadi lebih menarik. Perlu di ingat ini hanya dasar-dasarnya saja, anda bisa menggunakan trik untuk website yang lebih serius. Salah satu website yang sudah menerapkan trik seperti ini adalah website digital telepathy.
Salam web design indonesia
di demonya bisa, abis copas scriptnya, tapi kok gak mau yah?
script nya bisa diambil disini – https://gist.github.com/tutweb/f110da23c5ba52e9d525
kalo warna tersebut diganti picture bisa apa tidak ya??
Bisa
[…] Tutorial Membuat Perubahan Warna Background Ketika Scroll […]
Kalau memasukan code jquery nya tersebut gimana ya ? , maklum masih awam baru lulus smk
Download saja script nya lalu baca sendiri kode nya
tanya donk ?
pengertian scroll sedikit paham tapi itu ada $window itu apa ya ?
Thanks for any respon :D
oh wait window itu adalah buat parameter di dalam page, terus parameter itu di ambil tinggi nya untuk mengubah warna, is that right Admin ?
tapi kok scroltop ya bukan nya hanya scrool saja ya ?
kalau ada waktu respon donk penjelasan detail ya, Mauliate , Horas
kok tidak berubah warnanya?