Marquee text

Kamis, 05 Maret 2009 by katalog sma amuntai

Beberapa bagian dari blog kita dapat dibuat beranimasi, misal teks yang selalu berubah, menu yang terus menggulung, daftar link yang terus berputar dan sebagainya. Dan ternyata tidak sulit untuk melakukan hal tersebut. Pada trik kali ini, kita coba untuk melakukan animasi pada beberapa bagian yang berkaitan dengan teks. Sedikit pengetahuan HTML memang diperlukan. Kita akan memanfaatkan tag marquee untuk menampilkan teks yang dapat berjalan di browser.
Beberapa atribut yang dapat digunakan diantaranya pada tabel berikut:
AtributKeteranganContoh
Penggunaan
MarqueeMembuat
 teks berjalan		<MARQUEE>Teks
 yang lagi jalan</MARQUEE>
ALIGN=TOP,
 MIDDLE, BOTTOM		Menentukan
 perataan teks di sekitar marquee		<MARQUEE
 ALIGN=TOP> teks diratakan dengan bagian atas dari
 marquee</MARQUEE>
BEHAVIOR=
 SCROLL, SLIDE, ALTERNATE		Menentukan
 cara penampilan teks		<MARQUEE
 BEHAVIOUR=SCROLL> teks berjalan, kemudian diulang lagi dari awal
 </MARQUEE>
DIRECTION=LEFT
 atau RIGHT		Menentukan
 arah berjalannya teks		<MARQUEE
 DIRECTION=RIGHT> teks berjalan ke kanan </MARQUEE>
SCROLLDELAY=nMenentukan
 jumlah milidetik (n) antar tampilan		<MARQUEE
 SCROLLDELAY=15> teks berjalan dengan delay 15 mili detik
 </MARQUEE>

Untuk lebih memahami tabel dia atas perhatikan contoh-contoh di bawah. Untuk mengaplikasikan ke blogspot: copy-kan script yang terdapat pada kotak warna kuning (kotak di atasnya) kemudian masuk ke layout, tambah elemen halaman, pilih HTML/JavaScript dan paste kode yang telah disalin.

Contoh : 1

Teks berjalan secara horisontal:

<marquee bg="#ff00ff"
> teks berjalan tanpa tag direction. </marquee>


teks berjalan tanpa tag direction.

<marquee
behavior="alternate"
bgcolor="red"
direction="right"> teks berjalan dengan arah kiri-kanan.
</marquee>

teks berjalan dengan arah kiri-kanan.

Contoh 2:
Teks  menggulung ke atas atau ke bawah. Berikut adalah script yang cukup berguna jika kita mau tampilkan berita atau mungkin suatu daftar yang dapat menggulung ke atas atau ke bawah. Cara
menggunakanya juga sama, copy kan script dalam kotak warna kuning dan paste pada elemen HTML Blog. yang mungkin perlu di edit lagi adalah teks, lebar tampilan, delay serta warna.
<marquee
style="color:#ff8756; scrolldelay="100" direction="up" width="250px"
height="100px" bgcolor="#ffffcc">Teks menggulung ke atas.Tambahkan teks yang akan dibuat menggulung di sini. bila mau ubah warna coba di kasih sendiri </marquee>

Teks menggulung ke atas. Tambahkan teks yang akan dibuat menggulung di sini. bila mau ubah warna coba di kasih sendiri.


Untuk contoh berikut teks akan berhenti, jika pointer mouse diletakkan di atasnya sebaliknya akan mulai menggulung lagi jika pointer mouse digeser dari teks tersebut. Ubah warna teks dan font bila perlu.

<marquee 
style="color:blue"; scrolldelay="150" width="250px" direction="down"
bgcolor="#ffffcc" height="100px" onmouseover="this.stop()"
onmouseout="this.start()">
Tambahkan teks yang akan dibuat menggulung ke bawah di sini. Bila mau
ubah warna coba di kasih sendiri.</marquee>


Tambahkanteks yang akan dibuat menggulung ke bawah di sini. Bila mau ubah warna coba dikasih sendiri.




Label: | komentar (0)

0 komentar:



Posting Komentar