Animasi Teks di Web (Marquee)

Pada era komputerisasi, internet sudah menjadi sebuah kebutuhan dan gaya hidup manusia,
atau bahkan sudah menjadi sebuah kebutuhan untuk menunjang pekerjaan anda. Ketika anda
berselancar didunia internet ini dan berhenti disebuah webside, yang menjadi daya tarik
pertama adalah animasi yang terdapat dalam webside tersebut. Animasi dalam webside
biasanya merupakan animasi Graphics Interchange Format (GIF) dan tipe-tipe file yang lain.
Dalam bahasa HTML tersedia atribut (tag) yang disedia untuk animasi teks atau biasa disebut
dengan Marquee. Untuk membuat marquee yang perlua anda siapkan adalan satu buah
halaman baru Notepad. Cara membuatnya adalah sebagai berikut :

Buka notepad dengan cara Startmenu >> All Programs >> Accessories >> Notepad,
Kemudian ketik teks berikut :

<marquee>Ini adalah contoh dari marquee</marquee>

L alu save notepad dengan nama marquee.html (Gambar 1), anda sudah mendapat satu buah
file HTML kemudian double-click file tersebut. Anda tentu melihat tulisan “Ini adalah
contoh dari marquee” akan bergerak dari kanan ke kiri. Jika marquee yang anda buat tidak
menggunakan atribut lain maka secara otomatis teks akan bergerak dari kanan-kekiri dan
dengan background putih. Untuk mempercantik marquee yang anda buat ada beberapa atribut
marquee yang bias digunakan.

Gambar 1

1. Merubah Gerak Marquee

Gerak marquee dapat anda sesuaikan dengan keinginan anda, untuk merubah gerak marquee
dapat anda gunakan atribut direction=”up”. Contohnya seperti sintak berikut :

<marquee direction=”up”>

Ini Adalah Contoh marquee Bergerak keatas

</marquee>

Ada beberapa gerak yang lain yang bias anda gunakan :

<marquee direction=”up”> Teks akan bergerak dari bawah ke atas

<marquee direction=”down”> Teks akan begerak dari bawah ke atas

<marquee direction=”left”> Teks akan bergerak dari kanan ke kiri

<marquee direction=”right”> Teks akan bergerak dari kiri ke kanan.

2. Merubah Background Marquee Seperti

pada ulasan diatas jika marquee tidak menggunakan atribut lain maka background marquee
secara otomatis dengan warna “Putih”, untuk merubah background dapat digunakan
atribut bgcolor=”red”. Contoh seperti sintak berikut :

<marquee bgcolor=”#FF0066″>Ini Adalah Contoh Marquee Dengan Background

Merah</marquee>

Atau warna ditulis langsung

<marquee bgcolor=”red”>Ini Adalah Contoh Marquee Dengan Background

Merah</marquee>

Anda bias merubah warna background marquee sesuai dengan yang anda inginkan berikut
beberapa kode warna yang lain :

 Black = #000000

 White = #FFFFFF

 Red = #FF0000

 Yellow = #FFFF00

 Lime = #00FF00

 Aqua = #00FFFF

 Green = #008000

 Navy = #000080

 Blue = #0000FF

 Fuchsia = #FF00FF

 Gray = #808080

 Silver = #c0c0c0

 maroon = #800000

 Olive = #808000

 Teal = #008080

 Purple = #800080

3. Merubah Lebar dan Tinggi Marquee

Selain gerak dan background lebar dan tinggi marquee juga dapat dirubah, untukmerubahnya
anda dapat menggunakan atribut <marquee width=”500″ height=”100″>, width untuk lebar
dan height untuk tinggi. Contoh siperti sintak berikut :
<marqueewidth=”500″ height=”100″> Ini Contoh Marque Dengan Ukuran 500 X 100
</marquee>

4. Marquee Dengan Gambar

Selain menggunakan teks marquee juga dapat anda rubah menjadi gambar bergerak,
Contohnya seperti sintak berikut :

<marquee direction=”up”>

<img src=”gambar1.jpg” /><br>

<img src=”gambar2.jpg” /><br>

<img src=”gambar3.jpg”/><br>

</marquee>

Dalam sintak diatas saya menggunakan tiga buah gambar yaitu gambar1, gambar2, gambar3
dengan tipe file JPG saya meletakan gambar tersebut dalam satu folder dengan sintak diatas.

Bila anda tidak inin meletakan gambar satu folder dengan sintak diatas maka anda harus
mencantumkan alamat keberadaan gambar tersebut contoh :

Bila saya meletakan gambar di drive D dalam folder gambar maka yang harus anda rubah
adalah sebagai berikut :

<marquee direction=”up”>

<img src=”D:\gambar\gambar1.jpg” /><br><img src=”D:\gambar\gambar2.jpg” /><br>

<img src=”D:\gambar\gambar3.jpg” /><br>

</marquee>

Apabila anda ingin menampilkan marquee gambar di webside anda, maka anda harus upload
terlebih dahulu gambarnya. Alternatif lain untuk upload gambar saya rekomendasikan ke
sebuah situs yaitu www.photobucket.com.Hosting photo berlabel free (gratis) ini
menyediakan memmori sampai dengan 5 Mb. Sintak Diatas Dapat anda gabung sesuai
keinginan anda seperti contoh berikut :

<marquee direction=”up” bgcolor=”#CC3300″ height=”300″ width=”200″ >Inilah Hasil

Gabungan Sintak Diatas</marquee>