Marquee (teks berjalan)
Apa itu Marquee?
Marquee adalah teks berjalan dalam bahasa html. Kalo kita lihat
marquee menurut semantik sepertinya ga ada hubungan dengan teks
berjalan, tapi kalo diperhatikan lagi… mmmmh memang ga ada hubungannya
^_^ (sepertinya). Tapi kalo kita mau perhatikan lebih dalem, Marquee
mempunyai arti “Tenda Besar,” atau “tempat berteduh seperti atap dimuka
pintu masuk sebuah gedung” Mmmmh… apa hubungannya dengan marquee
sebagai teks berjalan…? Setidaknya menurut saya memang ada, melalui
“tenda” tersebut orang lalu lalang berjalan.
Berikut ini contoh-contoh sebagian kecil penggunaan marquee pada teks. Sengaja
marquee-marquee di bawah ini saya beri title mulai marquee 1.0 sampai
3.0.3, tidak ada keistimewaan dari penamaan tersebut, hanya untuk
memudahkan saya dalam memberi penjelasan. Plus tambahan saya sertakan
kode html yang diperlukan, Anda tinggal mengganti teks yang ada dalam
kode tersebut “Teks Anda”.
Marquee 1.0
Marquee 1.0 ini merupakan marquee standar agar teks Anda bisa berjalan secara default (dari kanan ke kiri).
Tag Html
<marquee>Teks Anda</marquee>
Marquee 1.0.1
Marquee 1.0.1 adalah pengembangan dari 1.0, keistimewaannya jika Anda
arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti dari perjalanannya yang panjang.
Tag Html
<marquee onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>
Marquee 1.0.2
Marquee 1.0.2 jika Anda menggunakan teks Arabic yang dimulai dari kanan
ke kiri, maka Anda membutuhkan Marque ini yang berjalan sebaliknya;
dari kiri ke kanan, contoh dengan teks arabic:
Tag Html
<marquee direction="right">Teks Anda</marquee>
Marquee 2.0
Marquee 2.0 Marquee ini tidak memiliki kemampuan magic seperti David Coperfield marquee sebelumnya yang bisa menembus ruang, Marquee 2.0 ini kerjaannya bolak-balik dari ruang kotak yang kasat mata.
Tag Html
<marquee behavior="alternate">Teks Anda</marquee>
Marquee 2.0.1
Marque 2.0.1 Pengembangan dari marquee sebelumnya, dengan pancingan scrollamount dia menjadi sangat agresif
Tag Html
<marquee behavior="alternate" scrollamount="18">Teks Anda</marquee>
Marquee 2.0.2
Marquee 2.0.2 Masih pengembangan dari Marquee 2.0 dengan sentuhan
on-mouse-over stop dan on-mouse-out start, seperti marquee 1.0.1 jika
Anda arahkan mouse pada teks maka dia akan berhenti.
Tag Html
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>
Marquee 3.0
Marquee 3.0 Dia adalah marquee climbing, marquee
pendaki ini suka sekali ketinggian, sehingga kita lihat arah teksnya
pun ke atas (up) :). Jika Anda memiliki teks yang banyak, maka marquee
ini merupakan pilihan yg tepat dan sangat cocok sebagai teman pendamping hidup Anda.
Tag Html
<marquee direction="up">Teks Anda</marquee>
Marquee 3.0.1
Marquee 3.0.1 Pengembangan dari marquee sebelumnya yang tidak mempunyai
batas ruang, marquee ini kita batasi ruang kasatnya sehingga memliki
height 100 saja. Demikian dengan kemampuan scrollamountnya kita
perlambat. Dan kita kasih on mouse stop/start juga.
Tag Html
<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100">Teks Anda</marquee>
Marquee 3.0.2
Marquee 3.0.2 Masih pengembangan dari marquee sebelumnya, hanya saja teks berada di tengah ruang kasat.
Tag Html
<marquee direction="up" width="100%" scrollamount="2" height="100" align="center">Teks Anda</marquee>
Marquee 3.0.3
Marquee 3.0.3 Pengembangan juga dengan arah
berlawanan dari marquee sebelumnya, marquee ini senang sekali berjalan
menurun. Sehinggan teks yang kita lihat berjalan dari atas ke bawah.
Kemampuan scrollamountnya tidak kita batasi sehingga terlihat agresif
dengan ruang kasat yang kecil. Silahkan Anda perlambat sendiri.Tag Html
<marquee direction="down" width="100%" height="100">Teks Anda</marquee>
Demikian tips sederhana ini, silahkan Anda coba….!
artikel ini saya kutip dari salah satu website namun saya lupa halamannya. Dengan niat untuk mengembangkan ilmu pengetahuan saya publikasikan artikel ini, semoga pahala tercurah kepada pembuat artikel yg saya kutip. Terimakasih Wassalamu'alaikum By.Arif Rohman