Dalam tips javascipt kali ini, kita akan membuat sebuah effek/animasi yaitu menggetarkan jendela browser. Kode javascript-nya tidak banyak, hanya kurang lebih 16 baris saja. Efek getaran ini bisa dijalankankan saat membuka halaman yaitu dengan ditempatkan dalam tag <body .... > dan bisa juga dijalankan saat meng-klik tombol. Keduanya akan dibahas di sini.Untuk membuat effek ini, tempatkan kode berikut ini di antara tag <head> dan </head>:
if (!window.closed) window.moveBy(jarak_getaran, jarak_getaran);
urutan++;
setTimeout('getar(0)', kecepatan);
}
</script>
Angka berwarna merah di atas (variabel kecepatan, jumlah_getar, dan jarak_getaran) bisa anda rubah sesuai keinginan.
Untuk menjalankan animasi ini saat membuka halaman, tempatkan kode getar(1); di dalam event onload pada tag body. Kodenya nanti akan seperti ini:
Sedangkan jika ingin menjalankannya saat sebuah tombol di-klik, maka buatkan sebuah tombol dengan kode seperti ini:
Catatan: Saat dicoba pada firefox, animasi ini bisa jalan. Namun pada Internet Explorer 7, jika tab-nya cuma satu bisa jalan, tapi jika tab-nya lebih dari satu, animasi ini tidak berfungsi. Mungkin teman-teman bisa memperbaiki dan mengembangkannya lebih sempurna lagi.
Semoga info ini bermanfaat bagi anda. Thanks.
urutan++;
setTimeout('getar(0)', kecepatan);
}
</script>
Angka berwarna merah di atas (variabel kecepatan, jumlah_getar, dan jarak_getaran) bisa anda rubah sesuai keinginan.
Untuk menjalankan animasi ini saat membuka halaman, tempatkan kode getar(1); di dalam event onload pada tag body. Kodenya nanti akan seperti ini:
Sedangkan jika ingin menjalankannya saat sebuah tombol di-klik, maka buatkan sebuah tombol dengan kode seperti ini:
Catatan: Saat dicoba pada firefox, animasi ini bisa jalan. Namun pada Internet Explorer 7, jika tab-nya cuma satu bisa jalan, tapi jika tab-nya lebih dari satu, animasi ini tidak berfungsi. Mungkin teman-teman bisa memperbaiki dan mengembangkannya lebih sempurna lagi.
Semoga info ini bermanfaat bagi anda. Thanks.
Thanks for reading & sharing INFO COMPUTER
0 comments:
Post a Comment