Home » » Tips Javascript - Membuat Animasi/Effect Jendela Browser Bergetar

Tips Javascript - Membuat Animasi/Effect Jendela Browser Bergetar

Posted by INFO COMPUTER on Monday, May 31, 2010

           
javascript window bergetarDalam 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>:

<script language="JavaScript">
    kecepatan = 100;
    jumlah_getar = 10;
    urutan = 0;
    function getar(mulai){
        jarak_getaran = 7;
        if (mulai==1) {
            urutan = 0;
            if (Math.floor(jumlah_getar/2) != (jumlah_getar/2)) jumlah_getar++;}
        if (urutan >= jumlah_getar) return;
        if (Math.floor(urutan/2) != (urutan/2))  jarak_getaran = -jarak_getaran;
        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:

<body onload="getar(1);">

Sedangkan jika ingin menjalankannya saat sebuah tombol di-klik, maka buatkan sebuah tombol dengan kode seperti ini:

<input type="button" value="Mulai Bergetar!" onclick="getar(1);">

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

Previous
« Prev Post

0 comments:

Post a Comment

Search