Pages

Senin, 09 Juli 2012

Cara Membuat Animasi Teks Berjalan di Status BAR

01.54  , , , , ,  

Cara Membuat Animasi Teks Berjalan di Status Bar, Status bar merupakan panel khusus di bagian paling bawah browser, berfungsi menampilkan informasi tentang browser, misalnya saat sedang membuka halaman sebuah website, di status bar tertulis 'KBG' Atau juga saat pointer mouse berada di atas sebuah link, maka di status bar tertulis alamat URL dari link tersebut. Tapi saya yakin sobat juga pernah melihat sebuah website / blog yang status bar-nya menampilkan teks animasi seperti teks berjalan atau berkedip. Berikut ini langkah - langkah untuk membuat animasi berjalan atau berkedip dengan menggunakan javascript,...



<script language="JavaScript">

var pesan_berjalan = "Selamat Datang di Websiteku. Selamat Membaca !!!";

var bmulai = 1;

function animasi_teks_berjalan_status_bar_model1(){

    if (bmulai == 1) {   

        pesan_berjalan = "            " + pesan_berjalan + "                ";   

        window.status = pesan_berjalan;

        bmulai = 0;

    }else{     

        pesan_berjalan = pesan_berjalan.substring(1) + pesan_berjalan.substring(0,1);   

        window.status = pesan_berjalan;

    }

    setTimeout('animasi_teks_berjalan_status_bar_model1()', 200);

}

</script>


Pada listing kode di atas, ubahlah nilai variabel pesan_berjalan pada teks berwarna merah. Adapun angka 200 menunjukkan interval pergerakan teks dalam satuan milidetik. sobat juga bisa mengubahnya sesuai keinginan. Tempatkan listing kode di atas di antara tag <head>  dan </head>.



Lalu rubahlah tag <body ...> dengan kode dibawah ini :




<body onload="setTimeout('animasi_teks_berjalan_status_bar_model1()', 200)">


tempatkan di antara tag <head> dan </head>





<script language="JavaScript">

var pesan_berkedip = "Selamat Datang di Websiteku. Selamat Membaca. Just Enjoy yourself !!!";

var pesan_tetap = "Tips dan Infoku:  ";

var bmulai = 1;

function animasi_teks_berkedip_status_bar_model2(){

    if (bmulai == 1) {

        window.status = pesan_tetap + pesan_berkedip;   

        setTimeout('animasi_teks_berkedip_status_bar_model2()', 1000);

        bmulai = 0;

    }else{      

        window.status = pesan_tetap;   

        setTimeout('animasi_teks_berkedip_status_bar_model2()', 500);

        bmulai = 1;

    }     

}

</script>


Pada listing kode di atas, ubahlah nilai variabel pesan_berjalan dan pesan_tetap pada teks berwarna merah sesuai dengan yang sobat inginkan.



Lalu rubahlah tag <body ...> sobat dengan kode dibawah ini:




<body onload="setTimeout('animasi_teks_berkedip_status_bar_model2()', 200)">


Kode di atas hanyalah sebuah program dasar animasi teks di status bar, sobat masih bisa mengembangkan dengan yang lebih unik & lebih keren lagi. Semoga Cara Membuat Animasi Teks Berjalan di Status BAR bisa bermanfaat, tambah jaringan teman dan berikan donasi di Kolom Blog GRATIS,.....