Sunday, 22 December 2013

Filled Under:

Tips HTML-Javascript: Membuat Animasi Teks Berjalan dan Berkedip 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 'Loading......'. Atau juga saat pointer mouse berada di atas sebuah link, maka di status bar tertulis alamat URL dari link tersebut. Tapi saya yakin anda juga pernah melihat sebuah website yang status bar-nya menampilkan teks animasi seperti teks berjalan atau berkedip. Nah, kali ini kita akan membuat animasi tersebut dengan menggunakan javascript. 

Animasi Teks Berjalan di Status Bar  --> Model 1

Untuk bisa membuatnya, tentunya kita harus sudah mengenal lebih jauh tentang javascript dan DHTML (dynamic HTML). Namun di sini, biar lebih mudah, kita langsung membuat listing kodenya, anda tinggal mengubah beberapa teks seperlunya saja, lalu tinggal mencopy-nya ke website anda bila ingin menggunakannya.

<script language="JavaScript">
var pesan_berjalan = "Selamat Datang di Websiteku. Selamat Membaca. Just Enjoy Yourself !!!";
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 (1 detik = 1000 milidetik). Anda juga bisa mengubahnya sesuai keinginan. Tempatkan listing kode di atas di antara tag <head>  dan </head>.
Lalu rubahlah tag <body ...> anda dengan berikut ini:

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

Animasi Teks Berjalan di Status Bar  --> Model 2

Pada model 2 ini, mirip dgn yang pertama di atas, hanya saja ada sedikit kombinasi, yaitu gabungan teks berjalan dan yang tidak berjalan (tetap). Kodenya seperti berikut: (tempatkan di antara tag <head> dan </head>)

<script language="JavaScript">
var pesan_berjalan = "Selamat Datang di Websiteku. Selamat Membaca. Just Enjoy Yourself !!!";
var pesan_tetap = "Tips dan Infoku :  ";
var bmulai = 1;
function animasi_teks_berjalan_status_bar_model2(){
    if (bmulai == 1) {
        pesan_berjalan = "             " + pesan_berjalan + "                 ";
        window.status = pesan_tetap + pesan_berjalan;
        bmulai = 0;
    }else{   
        pesan_berjalan = pesan_berjalan.substring(1) + pesan_berjalan.substring(0,1);   
        window.status = pesan_tetap + pesan_berjalan;
    }
    setTimeout('animasi_teks_berjalan_status_bar_model2()', 200);
}
</script>

Pada listing kode di atas, ubahlah nilai variabel pesan_berjalan dan pesan_tetap pada teks berwarna merah sesuai dengan yang anda inginkan. Lalu rubahlah tag <body ...> anda dengan berikut ini:

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

Animasi Teks Berkedip di Status Bar  --> Model 1

Kalau di atas kita membuat teks berjalan, sekarang kita akan membuat teks berkedip. Berikut ini kodenya: 

<script language="JavaScript">
var pesan_berkedip = "Selamat Datang di Websiteku. Selamat Membaca. Just Enjoy yourself !!!";
var bmulai = 1;
function animasi_teks_berkedip_status_bar_model1(){
    if (bmulai == 1) {     
        window.status = pesan_berkedip;
        setTimeout('animasi_teks_berkedip_status_bar_model1()', 1000);
        bmulai = 0;
    }else{   
        window.status = '  ';   
        setTimeout('animasi_teks_berkedip_status_bar_model1()', 500);
        bmulai = 1;
    }   }
</script>

Silahkan mengubah nilai variabel pesan_berjalan pada teks berwarna merah. Tempatkan listing kode di atas
di antara tag <head>  dan </head>. Lalu rubahlah tag <body ...> anda dengan berikut ini:

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

Animasi Teks Berkedip di Status Bar  --> Model 2

Pada model 2 ini kita pakai kombinasi seperti di atas, yaitu gabungan teks berkedip dan yang tidak berkedip (tetap). Kodenya seperti berikut: (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 anda inginkan. Lalu rubahlah tag <body ...> anda dengan berikut ini:

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

Kode-kode di atas hanyalah sebuah program dasar animasi teks di status bar, anda masih bisa mengembangkannya dengan yang lebih unik dan lebih keren lagi.

Semoga artikel ini bermanfaat untuk anda. Have fun !   (:-)
  
Artikel ini ditulis oleh Gilang ramadhan.


0 komentar:

Post a Comment

Saya tunggu Coment anda yang bersifat membangun blog ini.

Thanks...

Subscribe to: Post Comments (Atom)