Membuat Teks Berjalan ( Marquee )

Untuk menghiasi blog atau web, banyak cara yang bisa kita lakukan, termasuk memberi effek animasi teks berjalan. Dan untuk membuat teks berjalan caranya juga sangat mudah, baik dengan html, css, ataupun java scrip. Dan kali ini saya akan coba memberikan panduan cara membuat teks animasi berjalan dengan html. Animasi teks berjalan dengan html, tag dasar yang digunakan adalah "marquee". Marquee sendiri memiliki beberapa atribut dasar seperti "behavior, direction, scroll, delay, dan event mouse.

Langsung saja ya...,
Berikut ini adalah contoh penggunaan "marquee" pada HTML, dan sengaja saya sajikan beberapa contoh marquee, agar lebih mudah membedakan effek yang dihasilkan :

1. behvior=scroll.

Teks dengan atribut ini akan berjalan terus hingga habis teks yang ditampilkan dan mengulanginya lagi dari awal.

Teks Berjalan Terus

<marquee behavior=scroll>Tutorial Blog : Membuat Teks Berjalan ( Marquee )</marquee> Tutorial Blog : Membuat Teks Berjalan ( Marquee )

Teks Berjalan sesuai arah yang ditentukan

<marquee behavior=scroll direction=left>Tutorial Blog : Membuat Teks Berjalan ( Marquee )</marquee> Tutorial Blog : Membuat Teks Berjalan ( Marquee )

Teks Berjalan sesuai arah yang ditentukan dengan effek delay 

<marquee behavior=scroll direction=left scrolldelay=700 onmouseover=stop() onmouseout=start() >Tutorial Blog : Membuat Teks Berjalan ( Marquee )</marquee> Tutorial Blog : Membuat Teks Berjalan ( Marquee )

2. behavior=alternate.

Atribut ini akan menampilkan animasi teks berjalan dari kanan ke kiri dan kemudian kembali lagi kekanan.
Teks Berjalan Bolak - balik

<marquee behavior=alternate>Tutorial Blog : Membuat Teks Berjalan ( Marquee )</marquee> Tutorial Blog : Membuat Teks Berjalan ( Marquee )

Teks Berjalan Bolak - balik sesuai arah yang ditentukan

<marquee behavior=alternate direction=left>Tutorial Blog : Membuat Teks Berjalan ( Marquee )</marquee> Tutorial Blog : Membuat Teks Berjalan ( Marquee )

 Teks Berjalan Bolak - balik sesuai arah yg ditentukan, dgn effek delay

<marquee behavior=alternate direction=left  scrolldelay=700 onmouseover=stop() onmouseout=start()>Tutorial Blog : Membuat Teks Berjalan ( Marquee )</marquee><br /> Tutorial Blog : Membuat Teks Berjalan ( Marquee )

3. behavior=slide

Atribut ini akan menampilkan animasi teks berjalan hingga habis area lalu berhenti.

Teks Berjalan lalu berhenti

<marquee behavior=slide>Tutorial Blog : Membuat Teks Berjalan ( Marquee )</marquee> Tutorial Blog : Membuat Teks Berjalan ( Marquee )

Teks Berjalan lalu berhenti sesuai arah yang ditentukan

<marquee behavior=slide direction=left>Tutorial Blog : Membuat Teks Berjalan ( Marquee )</marquee> Tutorial Blog : Membuat Teks Berjalan ( Marquee )

Teks Berjalan lalu berhenti sesuai arah yg ditentukan, dgn effek delay

<marquee behavior=slide direction=left  scrolldelay=700 onmouseover=stop() onmouseout=start() >Tutorial Blog :Membuat Teks Berjalan ( Marquee )</marquee> Tutorial Blog : Membuat Teks Berjalan ( Marquee )

Catatan :

"direction"
berfungsi menentukan arah animasi teks akan berjalan yaitu right (kanan), left (kiri), up (keatas), dan down (kebawah).

"scroldelay"
berfungsi menentukan kecepatan animasi berjalan, semakin besar nilainya maka akan semakin cepat jalannya animasi.

"onmouseover=stop()"
Berfungsi menghentikan teks atau animasi yang sedang berjalan, ketika cursor mouse kita arahkan diatas teks atau animasi berjalan tersebut.

"onmouseout=start()"
Berfungsi akan kembali menjalankan teks atau animasi, jika cursor mouse tidak berada di atas teks atau animasi berjalan tersebut.

Anda bisa memberi variasi teks sesuai selera, silahkan anda kreasi sendiri.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.