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 <marquee>. 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:

<marquee>Ini baris teks, kode link, atau kode gambar yang akan ditampilkan</marquee>

Penjelasan:

• Awali dengan tag pembuka <marquee> dan akhiri dengan tag penutup </marquee>.
• Tempatkan teks, kode HTML link, atau kode HTML gambar di antara tag pembuka dan penutup marquee.

Berikut contoh marquee sederhana berupa teks tanpa pengaturan apapun.

Kode:
<marquee>Contoh teks berjalan</marquee>

Tampilan:
Contoh teks berjalan

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

Kode:
<marquee><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7PdoYAw888EvEOWLMiVUQ6ckSTS6CRH6I0__dvJz1rmZ7MuGhIaujOgHkeWZPqW3mf27htgPD8Ybe7i-dCDLlXc07OMob6EjYNjl9LILgEzp3PUkFfH149hWztj5QOESJ7kWEVUva0Rk/s1600/kode-html.png" /></marquee>

Tampilan:


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

Kode:
<marquee><a href="http://www.komputeran.com">Komputeran</a></marquee>

Tampilan:
Komputeran

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:

<marquee behavior="tindakan" direction="arah" scrollamount="angka">Ini baris teks, kode link, atau kode gambar yang akan ditampilkan</marquee>

Penjelasan:

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

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

Kode:
<marquee behavior="scroll" direction="right" scrollamount="1">Teks terus berputar ke kanan dengan kecepatan lambat</marquee>

Tampilan:
Teks terus berputar ke kanan dengan kecepatan lambat

Kode:
<marquee behavior="alternate" scrollamount="5">Teks bolak-balik ke kiri dan ke kanan dengan lebih cepat</marquee>

Tampilan:
Teks bolak-balik ke kiri dan ke kanan dengan lebih cepat.

Kode:
<marquee behavior="slide" direction="up" scrollamount="1">Teks ini bergerak perlahan sampai ke atas, lalu berhenti.</marquee>

Tampilan:
Teks ini bergerak perlahan sampai ke atas, lalu berhenti.

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:

Kode:
<marquee behavior="alternate" scrollamount="5" bgcolor="orange" width="50px">Teks berlatar oranye dengan lebar 50 piksel.</marquee>

Tampilan:
Teks berlatar oranye dengan lebar 50 piksel.

Contoh marquee dengan kode CSS:

Kode:
<marquee behavior="alternate" scrollamount="5" style="border:1px solid #eee;font-size:16px;color:#6699cc">Teks warna biru dan diberi garis batas abu-abu.</marquee>

Tampilan:
Teks warna biru dan diberi garis batas abu-abu.

Contoh marquee dengan kode JavaScript:

Kode:
<marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();">Tahan teks ini dengan mouse untuk menghentikannya.</marquee>

Tampilan:
Tahan teks ini dengan mouse untuk menghentikannya.

Anda bisa mengkombinasikan berbagai teknik di atas untuk mendapatkan hasil marquee yang lebih menawan. Selamat mencoba dan berkreasi!