Membuat Animasi Background
Saat Zhen sedang sibuk mengubah design blog (yang juga belum kelar-kelar 
), kita bahas saja apa yang telah dia lakukan di blog ini.
), kita bahas saja apa yang telah dia lakukan di blog ini.
Hal pertama yang akan saya bahas adalah membuat animasi background, sehingga background blog ini dapat bergerak.
Untuk membuat animasi background ini sangat mudah, kita hanya memerlukan sebuah image/gambar yg kita jadikan background dan beberapa baris script sederhana menggunakan javascript. Animasi background ini tidak terbatas hanya untuk background BODY tapi juga dapat diterapkan pada elemen-elemen halaman web yang lain. misal di tag DIV atau yang lain.
Sebagai contoh kita akan membuat background image pada elemen DIV yang bergerak, pertama-tama kita membuat sebuah elemen DIV dalam halaman HTML dengan kode seperti di bawah ini:
<div id=”digerakin” style=”width: 100%; height: 150px; background: url http://zhenzhen.blogdetik.com/files/2011…) repeat 0px 0px”></div>
Kemudian buatlah sebuah script javascript yang kita letakkan dalam HEAD dari halaman HTML. Script pertama ini berisi function yang bernama ‘nggerakin()’ yang berfungsi untuk menggerakan background image pada elemen HTML yang kita pilih, dalam contoh ini elemen DIV yang mempunyai ID ‘digerakin’.
<script type=”text/javascript”>
function nggerakin(){
if ( document.getElementById(’digerakin’)!=undefined ) {
zhGerakCounter=zhGerakCounter+zhMoveRange;
document.getElementById(’digerakin’).style['backgroundPosition']=String(zhGerakCounter)+’px 0px’;
}
setTimeout(’nggerakin()’, zhMoveSpeed);
}
</script>
Bagian terakhir adalah mmbuat script javascript yang kita letakkan pada bagian akhir dari halaman HTML kita, letakkan sebelum TAG penutup BODY ‘</BODY>’
<script type=”text/javascript”>
var zhGerakCounter=0;
var zhMoveSpeed=100;
var zhMoveRange=1;
nggerakin();
</script>
Penjelesan script:
Gerakan background image dilakukan oleh ‘function nggerakin()’, dengan merubah nilai dari background-position, dalam contoh di atas, background digerakkan secara horizontal. Apabila ingin menggerakan secara vertikal ubahlah nilai backgroundPosition= ‘0px ‘+String(zhGerakCounter)+’px’;.
Variable zhGerakCounter: adalah sebuah counter untuk timer.
Variable zhMoveSpeed: jarak waktu untuk menggerakkan background image.
Variable zhMoveRange: menentukan jarak perergerakan background image, semakin besar nilai zhMoveRange maka pergerakan background image akan terlihat lebih kasar.
Aturlah nilai zhMoveSpeed dan zhMoveRange untuk mendapatkan kecepatan gerak seperti yang Anda harapkan.
