Website yang animatif bisa membuat orang menjadi tertarik untuk
membukanya. Konten yang animatif biasanya mampu menarik perhatian pengunjung
untuk sekedar melihat atau membacanya. Dengan demikian informasi yang kita
tulis bisa tersampaikan. Biasanya website animatif dibuat dengan memasukkan flash ke dalam
website atau gambar-gambar animasi seperti .gif.
Ada cara lain supaya website kita menjadi lebih animatif, yaitu denganmembuat tulisan berjalan atau bergerak pada halaman website. Tulisan berjalan tersebut biasa disebut sebagai text marquee.
Ada cara lain supaya website kita menjadi lebih animatif, yaitu denganmembuat tulisan berjalan atau bergerak pada halaman website. Tulisan berjalan tersebut biasa disebut sebagai text marquee.
Marquee sebenarnya sebuah tag HTML yang digunakan untuk membuat konten (isi) website menjadi bergerak. Kali ini kita hanya akan belajar membuat teks berjalan saja. Secara sederhana, tag marquee tersebut ditulis dalam bentuk:
<marquee>TEXT HERE</marquee>
Secara otomatis, tulisan “TEXT HERE” yang dibungkus oleh tag marqueetersebut akan bergerak pada website kita.
Agar tulisan berjalan yang kita buat tersebut lebih menarik, kita bisa lakukan pengaturan terhadap beberapa atribut tag marquee. Atribut-atribut yang dimaksud diantaranya:
1.
Behavior , yaitu atribut untuk mengatur perilaku
tulisan. Nilainya adalah:
o Scroll : teks/tulisan akan berjalan berulang kali. Makdusnya adalah
setelah berjalan 1 kali, maka akan muncul kembali untuk berjalan lagi.
o Slide : teks/tulisan akan berjalan hanya 1 kali. Setelah itu berhenti.
o Alternate : teks/tulisan akan berjalan bolak balik, setelah dari kiri ke
kanan kemudian berbalik dari kanan ke kiri (atau sebaliknya).
Contoh
:
<marquee behavior="alternate">TEXT HERE</marquee>
Maka hasilnya menjadi:
<marquee behavior="alternate">TEXT HERE</marquee>
Maka hasilnya menjadi:
2.
Direction, merupakan atribut yang mengatur arah gerak
tulisan. Nilainya adalah:
o Right: agar tulisan
berjalan ke kanan
o Left: agar tulisan
berjalan ke kiri
o Down: agar tulisan
berjalan ke bawah
o Up: agar tulisan
berjalan ke atas.
Contoh:
<marquee behavior="scroll" direction="right">TEXT HERE</marquee>
Maka hasilnya menjadi:
<marquee behavior="scroll" direction="right">TEXT HERE</marquee>
Maka hasilnya menjadi:
3.
Scrollamount, merupakan atribut yang mengatur kecepatan
tulisan berjalan. Nilanya berupa angka. Semakin besar angkanya, maka
kecepatannya akan semakin besar pula.
Contoh :
<marquee behavior="alternate" direction="right" scrollamount="30">TEXT HERE</marquee>
Maka hasilnya menjadi:
Contoh :
<marquee behavior="alternate" direction="right" scrollamount="30">TEXT HERE</marquee>
Maka hasilnya menjadi:
4.
Onmouseover, merupakan atribut yang mengatur perilaku
tulisan jika mouse diletakkan di atasnya. Misalnya kita ingin tulisan akan
berhenti jika muse diletakkan diatasnya, maka bentuknya adalah :
onmouseover="this.stop()"
Contoh:
<marquee behavior="alternate" direction="right" scrollamount="30" Onmouseover="this.stop()">TEXT HERE</marquee>
Maka hasilnya menjadi:
onmouseover="this.stop()"
Contoh:
<marquee behavior="alternate" direction="right" scrollamount="30" Onmouseover="this.stop()">TEXT HERE</marquee>
Maka hasilnya menjadi:
5.
Onmouseout, merupakan atribut yang mengatur perilaku tulisan
jika mouse tidak diletakkan di atasnya. Misalnya kita ingin membuat tulisan
yang berhenti pada contoh di atas menjadi bergerak kembali, maka bentuknya
adalah:
onmouseout="this.start()"
Contoh:
<marquee behavior="alternate" direction="right" scrollamount="30" Onmouseover="this.stop()" onmouseout="this.start()">TEXT HERE</marquee>
Maka hasilnya menjadi:
Selain atribut-atribut
utama di atas, sebenarnya masih banyak lagi atribut untuk marquee. Pembaca
mungkin bisa melihatnya dengan menggunakanMacromedia Dreamweaver. Atribut-atribut untuk tag
marquee lainnya bisa berupa atribut tag HTML biasa, sepertu style, width, height, align, dan lain sebagainya.onmouseout="this.start()"
Contoh:
<marquee behavior="alternate" direction="right" scrollamount="30" Onmouseover="this.stop()" onmouseout="this.start()">TEXT HERE</marquee>
Maka hasilnya menjadi:
Contoh:
<marquee behavior="alternate" direction="right" scrollamount="30" bgcolor="#0000FF" width="50%">TEXT HERE</marquee>
Tidak ada komentar:
Posting Komentar