Monday, April 15, 2013

Membuat Tulisan Berjalan dengan HTML (Marquee Text)

Dalam perintah HTML sudah tersedia perintah untuk menggerakkan objek berupa tulisan atau gambar dengan perintah <marquee>TEXT</marque>.
Dengan perintah tersebut objek yang berada diantaranya secara otomatis akan bergerak dari kanan kekiri secara horizontal. Untuk beberapa keperluan kita bisa tambahkan beberapa atribut bawaan yang bisa disesuaikan. Atribut adalah opsi pilihan yang bisa kita tempelkan pada perintah utama marquee. Beberapa atribut tersebut yaitu :
  1. direction : digunakan untuk mengubah arah pergerakan. Atribut ini bisa diberi nilai : up (bawah ke atas), down (atas ke bawah), left (dari kanan ke kiri), dan right (dari kiri ke kanan).
  2. scrollamount : digunakan untuk mengatur lompatan karakter pada tiap gerakan. Atribut ini bisa diberi nilai minimal 1. Semakin besar nilainya berarti akan semakin besar jarak lompatan karakternya sehingga akan cepat sampai ke titik akhir.
  3. scrolldelay : digunakan untuk mengatur cepatnya pergerakan. Atribut ini bisa diberi nilai minimal 1. Semakin besar berarti semakin cepat pergerakanya.
Perubahan kombinasi nilai scrollamount dan scrolldelay akan sangat berpengaruh terhadap kecepatan dan halus tidaknya pergerakan objek. Jadi harus diatur agar dilihat bagus.

<marquee scrollDelay="10" scrollamount="3" direction="right">Selamat datang di website saya</marquee>
Selamat datang di website saya

Kita bisa juga tambahkan opsi agar pergerakan objek bisa dikontrol oleh mouse, sehingga jika korsur mouse digerakkan diatasnya maka objek berhenti bergerak, dan jika dipindah maka bergerak kembali. Berikut contoh kodenya :
<marquee onmouseover='this.stop()' onmouseout='this.start()' direction="right" scrollDelay="10" scrollamount="3">Selamat datang di website saya</marquee>
Selamat datang di website saya
 
Bedakan kode dan hasilnya dari kode sebelumnya, ada tambahan onmouseover='this.stop()' onmouseout='this.start()'yang mempengaruhi pergerakan jalan dan berhenti objek.
Kode HTML diatas bisa anda gunakan untuk menambah animasi pada halaman blog/website anda. Caranya copy kode diatas dan sisipkan dalam blok body halaman web anda.

No comments:

Post a Comment

Kebahagiaan sejati bukanlah pada saat kita berhasil meraih apa yg kita perjuangkan, melainkan bagaimana kesuksesan kita itu memberi arti atau membahagiakan orang lain.