Cara Membuat Tulisan Berjalan (Efek Marquee).

Dalam membuat sebuah postingan, kadang kita ingin menambahkan sedikit efek pada tulisan agar terlihat menarik. Salah satu efek yang dapat ditambahkan adalah marquee. Efek ini merupakan bagian tag HTML yang digunakan untuk membuat teks berjalan. Secara umum efek marquee dapat dibuat dengan script <marquee> teks </marquee>. Meskipun begitu, ada atribut lain yang dapat ditambahkan, antara lain :

• bgcolor : untuk mengatur warna background tulisan. (contoh : bgcolor="blue") 
• direction : untuk mengatur arah gerakan teks. (contoh : direction="left", direction="right", direction="up", direction="down")
• behavior : untuk mengatur perilaku gerakan. (contoh : behavior="alternate", behavior="slide")
• scrollamount : untuk mengatur kecepatan gerakan teks. Semakin besar nilainya, maka semakin cepat gerakannya. (contoh : scrollamount="10") 
• loop : untuk mengatur jumlah loop. (contoh : loop="100") 
• width : untuk mengatur lebar blok teks dalam angka atau persentase. (contoh : width="100", width="50%")
• height : untuk mengatur tinggi blok teks dalam angka atau persentase. (contoh : height="100", height="50%")
• onmouseover : untuk menghentikan gerak teks ketika ditunjuk mouse / kursor. (contoh : onmouseover="this.stop()")
• onmouseout : untuk melanjutkan gerak teks ketika mouse / kursor sudah tidak menunjuk. (contoh : onmouseout=this.start()")

Adapun contoh penggunaan script marquee adalah sebagai berikut :

1. Marquee dari kiri ke kanan.

Script :

<marquee direction="right" scrollamount="5" width="50%"> masukkan tulisan kalian di sini </marquee>

Hasil :
masukkan tulisan kalian di sini

Keterangan :

Atribut scrollamount dan width dapat diubah besarnya sesuai keinginan (lihat penjelasan sebelumnya).

2. Marquee dari kanan ke kiri.

Script :

<marquee direction="left" scrollamount="5" width="50%"> masukkan tulisan kalian di sini </marquee>

Hasil :
masukkan tulisan kalian di sini

Keterangan :

Atribut scrollamount dan width dapat diubah besarnya sesuai keinginan (lihat penjelasan sebelumnya).

3. Marquee dari atas ke bawah.

Script :

<marquee direction="down" scrollamount="5" width="50%" height="100"> masukkan tulisan kalian di sini </marquee>

Hasil :
masukkan tulisan kalian di sini

Keterangan :

Atribut scrollamount, width, dan height dapat diubah besarnya sesuai keinginan (lihat penjelasan sebelumnya).

4. Marquee dari bawah ke atas.

Script :

<marquee direction="up" scrollamount="5" width="50%" height="100"> masukkan tulisan kalian di sini </marquee>

Hasil :

masukkan tulisan kalian di sini

Keterangan :

Atribut scrollamount, width, dan height dapat diubah besarnya sesuai keinginan (lihat penjelasan sebelumnya).

5. Marquee dengan warna background.

Script :

<marquee bgcolor="blue" direction="right" scrollamount="5" width="50%"> masukkan tulisan kalian di sini </marquee>

Hasil :

masukkan tulisan kalian di sini

Keterangan :

Atribut bgcolor dapat diubah besarnya sesuai keinginan (lihat postingan Color Picker untuk lebih jelasnya).

6. Marquee dengan efek stop saat tulisan ditunjuk kursor.

Script :

<marquee direction="right" scrollamount="5" width="50%" onmouseover="this.stop()" onmouseout="this.start()"> arahkan kursor kalian ke sini </marquee>

Hasil :

arahkan kursor kalian ke sini

7. Marquee dengan fungsi behavior.

Script :

<marquee behavior="alternate" direction="right" scrollamount="5" width="50%" loop"100"> masukkan tulisan kalian di sini </marquee>

<marquee behavior="slide" direction="right" scrollamount="5" width="50%" loop="100"> masukkan tulisan kalian di sini </marquee>

Hasil :
Atas :
masukkan tulisan kalian di sini
Bawah :
masukkan tulisan kalian di sini

Sekian tutorial kali ini. Semoga bermanfaat...

----------------

Catatan : Bila gambar ada yang tidak muncul, video tidak dapat diplay atau tutorial sudah tidak relevan, mohon beri komentar pada kolom di bagian bawah postingan ini. Terima kasih.