Dalam tutorial ini, kita akan membuat animasi background image HTML dengan menggunakan jQuery dan CSS. Dalam tutorial sebelumnya, kita telah membuat jquery tooltips menggunakan bootstrap. Dalam tutorial ini, saya akan membuat background image bergerak ke arah vertikal atau horizontal. Untuk membuat background image bergerak vertikal dan horizontal saya mengubah posisi x atau y dari background image berdasarkan arah yang dipilih.
Script HTML untuk Animasi Background Image
Script di bawah untuk membuat background image dan button animation control untuk menggerakan background animation image,
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Cara Membuat Background Image Animation dengan jQuery</title> </head> <body> <div id="scroll-bg"><h2>Scrolling Background</h2></div> <input type="hidden" id="direction" value="y" /> <input type="button" id="btnAction" value="Change Direction" onClick="changeDirection();" /> </body> </html> |
Animasi Background Image jQuery
Script dibawah ini terdapat dua fungsi. Fungsi scrollBg () digunakan untuk mengubah posisi background image dengan menggunakan jQuery. Dalam fungsi ini, saya menggunakan fungsi Javascript setInterval () untuk mengubah posisi setiap 10 detik.
1 2 3 4 5 6 7 8 9 |
function scrollBg() { var x = 0; var y = 0; window.setInterval(function() { $("#scroll-bg").css("backgroundPosition", x + "px" + " " + y + "px"); if($("#direction").val()=='x') x--; else y--; }, 10); } |
Fungsi script dibawah ini digunakan untuk mengubah arah animasi background image pada posisi vertikal atau horizontal.
1 2 3 4 5 |
function changeDirection() { if($("#direction").val() == 'y') $("#direction").val('x'); else $("#direction").val('y') scrollBg(); } |
Dari script di atas maka akan menghasilkan output seperti di bawah ini,
Oke itulah tadi pembahasan saya tentang Cara Membuat Background Image Animation dengan jQuery, semoga bermanfaat.