Animate Page Title using Javascript

Post at Sat, 05.January.2008 12:13:21 PM .
Hit: 1208 . Comment: 1

Kamu mungkin sering melihat website yang title website-nya bergerak atau beranimasi. Nah, sekarang saya akan sharing dikit mengenai animasi sederhana menggunakan Javascript. Bagi yang pernah memakai C/C++, membuat animasi dapat menggunakan "delay" . Sedangkan pada Javascript disediakan fungsi yang mirip dengan "delay" yaitu : "setInterval" .

    setInterval(namaFungsi,jedaWaktu);

    namaFungsi : diisi dengan nama fungsi yang akan melakukan animasi.
    jedaWaktu : bisa kita kenal dengan delay, jedaWaktu diisi dengan angka dalam satuan msecond, jika ingin animasi setiap 1 detik, maka diisi dengan 1000.

Sebagai contoh , saya akan menganimasikan title web.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>-Riunix.com-</title>
<script type="text/javascript">
   function animateTitle(){
       var title=document.title;
       document.title=title.substr(1,title.length)+title.substr(0,1);
   }
   setInterval(animateTitle,1000);
</script>
</head>

<body>
   Simple Animation using Javascript
</body>
</html>

Hasilnya dapat dilihat title page halaman ini yang dianimasikan oleh skrip ini

.

Animasi ini bisa berjalan dengan baik di Mozilla Firefox, IE6, dan Opera.
Selain animasi title, kita bisa membuat animasi lainnya dengan menggunakan setInterval . Selamat Mencoba