Membuat Tampilan Teks dan Gambar Berjalan dengan Marquee

Anda sering melihat tampilan teks atau gambar yang berjalan, berputar, atau bergeser-geser menampilkan cuplikan teks atau gambar tertentu di halaman web? Teknik ini bisa dilakukan dengan mudah menggunakan kode HTML biasa, yaitu menggunakan tag

Untuk meningkatkan efek tampilan, marquee juga bisa disisipi kode CSS dan JavaScript. Ingin mencobanya di website atau blog Anda?

Tag marquee sebenarnya bukan tag standar HTML, sehingga ada kemungkinan tidak berfungsi dengan baik di browser tertentu. Namun jangan terlalu khawatir, browser-browser populer bisa menjalankannya dengan baik.

Prinsipnya, kode dasar marquee (tanpa pengaturan tambahan) yang perlu Anda buat adalah sebagai berikut:

(Disini baris teks, URL link, atau URL gambar akan ditampilkan)





Penjelasan:

• Awali dengan tag pembuka marquee .
• Tempatkan teks, kode HTML link (awali  tag a href="URLnya", akhiri  tag /a ) atau kode HTML gambar (awali  tag img src="URLnya", akhiri  tag /img ) di antara tag pembuka marquee dan penutup /marquee.

Berikut contoh marquee sederhana berupa teks tanpa pengaturan apapun.

Tampilan:

Contoh teks berjalan

Berikut contoh marquee sederhana berupa gambar. Anda cukup mengganti teks dengan kode HTML untuk penyisipan gambar (URL images).

Tampilan:

Contoh Gambar berjalan.



Berikut contoh marquee sederhana berupa teks link. Anda cukup memasang kode HTML untuk penyisipan link.

Tampilan:


My Diary Blog
Contoh URL Link (HTML) berjalan. 

Selain contoh kode marquee dasar di atas, Anda dapat mengatur tampilan marquee sesuai dengan keinginan Anda. Caranya dengan menambahkan atribut tertentu di dalam tag marquee. Berikut ini susunan kodenya:

Penjelasan:

• Gunakan behavior="perintahnya" untuk melakukan perintah tertentu, nilainya yaitu: scroll (terus berputar), slide (berputar sekali), alternate (bolak-balik).
• Gunakan direction="arah gerak" untuk menentukan arah pergerakannya, nilainya yaitu: left (ke kiri), right (ke kanan), up (ke atas), down (ke bawah).
• Gunakan scrollamount="kecepatan" untuk menetapkan kecepatannya, nilainya yaitu: angka, dalam hal ini angka 1 paling lambat. 

Berikut contoh penggunaan marquee dengan pengaturan tindakan, arah, dan kecepatannya:

Tampilan:

Teks ini terus bergerak ke kanan dengan kecepatan lambat


Tampilan:

Teks bergerak  bolak-balik ke kiri ke kanan lebih cepat


Selain menggunakan pengaturan via atribut behavior, direction, dan scrollamount, Anda juga bisa mencoba menambahkan atribut align (perataan margin), bgcolor (warna latar), width (lebar marquee), loop (membatasi jumlah perulangan), dan scrolldelay (mengatur waktu jeda). Selain itu, tag marquee juga bisa Anda sisipi style (CSS) untuk mempercantik tampilan. Bahkan, Anda bisa menambahkan kode JavaScript di dalamnya.

Contoh marquee dengan atribut lainnya:

Tampilan:

Teks berlatar oranye dengan lebar 580px.

Tampilan:

Teks warna biru dan diberi garis batas abu-abu.
 



Selamat Bereksperimen !