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
dengan membuat 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 marquee tersebut
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 :
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 :
- Scroll : teks/tulisan akan berjalan berulang kali. Makdusnya adalah setelah berjalan 1 kali, maka akan muncul kembali untuk berjalan lagi.
- Slide : teks/tulisan akan berjalan hanya 1 kali. Setelah itu berhenti.
- Alternate : teks/tulisan akan berjalan bolak balik, setelah dari kiri ke kanan kemudian berbalik dari kanan ke kiri (atau sebaliknya).
Maka hasilnya menjadi :
2. Direction, merupakan atribut yang mengatur arah gerak tulisan.
Nilainya adalah :
- Right : agar tulisan berjalan ke kanan
- Left : agar tulisan berjalan ke kiri
- Down : agar tulisan berjalan ke bawah
- Up : agar tulisan berjalan ke atas.
Contoh : <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.
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 :
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 :
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 menggunakan Macromedia Dreamweaver. Atribut-atribut untuk tag marquee lainnya bisa berupa atribut tag HTML biasa seperti style, width, height, align dan lain sebagainya.
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 menggunakan Macromedia Dreamweaver. Atribut-atribut untuk tag marquee lainnya bisa berupa atribut tag HTML biasa seperti style, width, height, align dan lain sebagainya.
Contoh : <marquee behavior="alternate" direction="right"
scrollamount="30" bgcolor="#0000FF"
width="50%">TEXT HERE</marquee>
Maka hasilnya menjadi:
Maka hasilnya menjadi:
0 comments:
Semua umpan balik saya hargai dan saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin.
1. Komentar SPAM akan dihapus segera setelah saya review
2. Pastikan untuk klik "Berlangganan Lewat Email" untuk membangun kreatifitas blog ini
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana.
4. Jangan Tambah Link ke tubuh komentar Anda karena saya memakai system link exchange
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.