Pada postingan kali ini Blog Tips and Trick akan membahas mengenai beberapa fungsi attribut dari efek Marquee
yang biasa digunakan untuk membuat suatu object seperti teks atau
gambar bergerak. Marquee mungkin bisa dikatakan adalah salah satu bahasa
html yang berfungsi untuk menggerakan suatu object. tapi fungsi dari marquee tersebut tidak akan terjadi tanpa didukung oleh beberapa attribut seperti dibawah berikut ini.
1. Behavior : yaitu untuk mengatur gaya gerakan pada gambar ataupun teks. biasanya ada 3 gaya gerakan yang bisa digunakan, diantaranya yaitu :
* Alternate : yaitu untuk menggerakan gambar atau teks secara bolak-balik
* Slide : yaitu untuk menggerakan gambar atau teks berjalan ke satu arah sekali saja
* Scroll : yaitu untuk menggerakan gambar atau teks ke satu arah secara Continue
2. Direction : yaitu untuk mengatur arah gerakan gambar ataupun teks.biasanya ada 4 arah gerakan yang bisa kita digunakan yaitu :
* Up : Untuk menggerakan suatu object bergerak keatas
* Down : Untuk menggerakan suatu object bergerak kebawah
* Left : Untuk menggerakan suatu object bergerak kekiri
* Right : Untuk menggerakan suatu object bergerak kekanan
4. Face : Untuk mengatur jenis font / teks seperti : arial, verdana, times new roman, courier, dan lain sebagainya.
5. Width : Untuk mengatur ukuran panjang atau Lebar ruangan gambar/teks dalam satuan pixel.
6. Height : Untuk mengatur ukuran Tinggi ruangan gambar/teks dalam satuan pixel
7. Bgcolor : Untuk mengatur
warna background, seperti: "black", "green", "blue", "red", "white",
pink, "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna
background anda gunakan"transparent"
8. Scrolldelay : Untuk mengatur ukuran waktu tunda gerakan dalam satuan per mili detik
9. Scrollamount : Untuk mengatur ukuran kecepatan gerakan dalam satuan pixel.
10. Loop : Untuk mengatur ukuran jumlah pengulangan.
Bila anda hanya sekedar ingin membuat
suatu object seperti teks ataupun gambar bergerak ke kiri, kanan, atas
dan bawah. tanpa memerlukan background, ukuran, warna dan lain-lain.
misalnya anda ingin membuat sebuah tulisan bergerak kekiri, maka anda
cukup menggunakan kode seperti contoh dibawah ini.
<marquee direction="Left">Teks atau gambar masukan disini</marquee>
Kode diatas hanya menggunakan 1
attribut dari efek marquee, yaitu Direction yang berfungsi untuk
menentukan arah gerakan saja. bila anda ingin membuat animasi teks
tersebut dengan tampilan yang bisa di atur sesuai keinginan anda. maka
anda perlu menambahkan beberapa attribut efek marquee lainnya. misalnya
seperti contoh dibawah ini.
Welcome To My Blog
Untuk membuat bentuk tampilan animasi
teks seperti pada contoh gambar di atas. anda harus menambahkan beberapa
attribut seperti font face untuk jenis teks, size untuk ukuran teks dan
lainnya. seperti pada kode dibawah ini yaitu untuk tampilan animasi
teks di pada contoh atas.
<font face="arial" color="black"
size="10"><marquee direction="right" behavior="alternate"
direction="right" scrollamount="2" height="30px" scrolldelay="10"
bgcolor="orange" width="400px">Welcome To My Blog</marquee></font>
Bila anda ingin membuat animasi berupa gambar, maka beberapa attribut maka kode untuk fontnya tidak usah dipakai atau dihapus. contohnya seperti pada kode dibawah ini.
<marquee direction="right" behavior="alternate" scrollamount="7" height="40px" scrolldelay="10" width="400px">Masukan Link Gambar Anda disini</marquee>
Masukan link image source anda pada bagian kode tersebut, tepatnya sebelum kode </marquee>. misalnya untuk animasi gambar di atas saya memakai gambar emoticon. image sourcenya yaitu :
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/>
Blia anda ingin memperbanyak gambar pada tampilan animasi tersebut, anda cukup memasukan atau mempaste link image source anda tepat sebelum kode </marquee>. misalnya seperti dibawah ini.
<marquee direction="right" behavior="alternate" scrollamount="7" height="40px" scrolldelay="10" width="400px">
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/></marquee> Untuk lebih jelasnya, silahkan anda praktekkan sendiri pada blog anda, selamat mencoba dan semoga bermanfaat. Salam blogger mania.
