Membuat jQuery pada Animasi Scroll Color Background

By Infokoding On May 24, 2018

Dalam tutorial ini, kita akan melihat cara membuat animasi warna latar belakang di halaman gulir. Pada artikel sebelumnya, kita telah melihat animasi gambar latar belakang.

Dalam contoh ini, kita menggunakan fungsi jQuery animate () untuk melakukan efek animasi latar belakang. Kami menggunakan array warna latar belakang untuk diubah pada halaman gulir untuk membuat animasi latar belakang gradien.

HTML DIV untuk Menerapkan Background Animasi

ID elemen DIV ini ditetapkan sebagai pemilih untuk memanggil animasi jQuery.

<body>		
    <div id="bg-animate"> </div>
</body>

Animasi Background jQuery

Skrip jQuery ini disebut pada halaman gulir dan mengubah indeks latar belakang-warna. Indeks yang diubah digunakan untuk memilih warna dari array untuk mengubah latar belakang = warna elemen DIV dengan animasi gradien.

<script>
$(document).ready(function(){
	var i = 0;
	var bgColor = [ "#000099", "#003300", "#FF9900", "#FF3366","#CC66FF"];
	$(window).scroll(function() {clearTimeout( $.data( this, "scrollCheck" ) );
		$.data( this, "scrollCheck", setTimeout(function() {
			$("#bg-animate").animate({backgroundColor: bgColor[i]}, 1500);
			if(i < bgColor.length-1) {
				i = i+1 
			} else {
				i = 0;
			}
		}, 250) );		
	});
});
</script>

Demo