Membuat jQuery pada Animasi Scroll Color Background

0 76

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

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.