30/12/13

Cara Membuat Running teks dengan sript HTML Marquee


Cara membuat Running teks / tulisan bergerak /marquee bagaimana?. Mungkin anda pernah melihat sebuah efek text bergerak di salah satu web atau blog yang pernah anda kunjungi. Efek text bergerak tersebut dalam program HTML dinamakan marquee. Berikut ini adalah sedikit penjelasan tentang marquee dan bagaimana cara membuat marquee.


Apa itu Marquee

Marquee merupakan tag non-standard element HTML yang menyebabkan suatu text / gambar bergerak ke atas, bawah, kanan, atau kiri secara otomatis. Untuk membuat marquee, caranya cukup simple dan mudah sekali. Kita hanya perlu menyisipkan kode HTML untuk membuat marquee, diantara text / gambar yang akan kita buat bergerak. Berikut kode dasar HTML marquee :
<marquee>Text atau gambar disini</marquee>
Dari kode HTML dasar marquee tersebut, jika kita aplikasikan dalam web / blog, maka hasilnya menjadi seperti ini :
Text atau Gambar disini

Marquee Attribute

Untuk lebih memperjelas dalam membuat marquee, berikut beberapa attribute yang sering digunakan dalam tag marquee :

WIDTH = menentukan lebar area marquee, value yang digunakan yaitu berupa angka dalam piksel (px) dan persen (%). Contoh :
Kode HTML MarqueeHasil
<marquee width="50%">Text atau Gambar Disini</marquee>Text atau Gambar Disini
Jika attribute width tidak digunakan, maka secara default width yang digunakan yaitu 100%. Misalnya marquee disimpan di bagian sidebar yang memiliki width 300px, maka width marquee pun memiliki width 300px.

HEIGHT = menentukan lebar area marquee, value yang digunakan yaitu berupa angka dalam piksel (px) dan persen (%). Contoh :
Kode HTML MarqueeHasil
<marquee height="50px">Text atau Gambar Disini</marquee>Text atau Gambar Disini
Jika attribute height tidak digunakan, maka secara default height yang digunakan sesuai dengan ukuran font (font-size).

DIRECTION = menentukan arah pergerakan marquee, value yang digunakan yaitu left, right, up, dan down. Contoh :
Kode HTML MarqueeHasil
<marquee direction="left">Text atau Gambar Disini</marquee>Text atau Gambar Disini
<marquee direction="right">Text atau Gambar Disini</marquee>Text atau Gambar Disini
<marquee direction="up">Text atau Gambar Disini</marquee>Text atau Gambar Disini
<marquee direction="down">Text atau Gambar Disini</marquee>Text atau Gambar Disini
Jika attribute direction tidak digunakan, maka secara default direction yang digunakan adalah left. Khusus untuk direction up dan down, sebaiknya tentukan juga tinggi dari area marquee tsb, yaitu dengan menambahkan attribute height. Hal ini dimaksudkan untuk mengatasi value height secara default untuk attribute direction up dan down yaitu sekitar 150px – 200px (kalo ga salah :mrgreen: )

BEHAVIOR = menentukan perilaku pergerakan marquee, value yang digunakan yaitu scroll, slide dan alternate. Contoh :
Kode HTML MarqueeHasil
<marquee behavior="scroll">Text atau Gambar Disini</marquee>Text atau Gambar Disini
<marquee behavior="slide">Text atau Gambar Disini</marquee>Text atau Gambar Disini
<marquee behavior="alternate">Text atau Gambar Disini</marquee>Text atau Gambar Disini
Jika attribute behavior tidak digunakan, maka secara default value yang digunakan adalah scroll.

SCROLLAMOUNT = menentukan kecepatan pergerakan dalam piksel. Value yang digunakan berupa angka (integer). Contoh :
Kode HTML MarqueeHasil
<marquee>Text atau Gambar Disini</marquee> tanpa scrollamountText atau Gambar Disini
<marquee scrollamount="15">Text atau Gambar Disini</marquee>Text atau Gambar Disini
<marquee scrollamount="50">Text atau Gambar Disini</marquee>Text atau Gambar Disini
Jika attribute scrollamount tidak digunakan, maka secara default akan menggunakan value 6.

SCROLLDELAY = menentukan kecepatan pergerakan marquee dalam milisecond. Value yang digunakan berupa angka (integer). Contoh :
Kode HTML MarqueeHasil
<marquee>Text atau Gambar Disini</marquee> tanpa scrolldelayText atau Gambar Disini
<marquee scrolldelay="300">Text atau Gambar Disini</marquee>Text atau Gambar Disini
<marquee scrollamount="600">Text atau Gambar Disini</marquee>Text atau Gambar Disini
Jika attribute scrolldelay tidak digunakan, maka secara default akan menggunakan value 85.

BGCOLOR = menentukan warna background dari marquee. Value yang digunakan berupa nilai warna dalam hexa atau text.
Kode HTML MarqueeHasil
<marquee>Text atau Gambar Disini</marquee> tanpa bgcolorText atau Gambar Disini
<marquee bgcolor="green">Text atau Gambar Disini</marquee>Text atau Gambar Disini
Secara default, value dari attribute bgcolor yaitu none (tanpa warna).

LOOP = menentukan jumlah pengulangan marquee. Secara default jika attribute ini tidak digunakan, maka marquee akan melakukan pengulangan secara terus menerus.
Kode HTML MarqueeHasil
<marquee loop="2">Text atau Gambar Disini</marquee>Text atau Gambar Disini
salah satu masalah yang sering dialami ketika menggunakan attribute loop yaitu text / gambar yang ada di dalam marquee akan menghilang setelah pengulangan selesai (seperti contoh diatas). Untuk mengatasi hal ini, jangan lupa setiap kali menggunakan attribute loop sebaiknya sertakan juga attribute behavior dengan value slide atau alternate. Contoh :
Kode HTML MarqueeHasil
<marquee loop="2" behavior="alternate">Text atau Gambar Disini</marquee>Text atau Gambar Disini
<marquee loop="2" behavior="slide">Text atau Gambar Disini</marquee>Text atau Gambar Disini

HSPACE dan VSPACE = menentukan spasi dari kiri dan kanan (hspace) dan spasi dari atas dan bawah (vspace). Value dalam angka (integer). Contoh :
Kode HTML MarqueeHasil
Paragraph
<marquee hspace="10" bgcolor="yellow">Ini contoh hspace</marquee>
Paragraph
Paragraph
Text atau Gambar DisiniParagraph
Paragraph
<marquee vspace="30" bgcolor="yellow">ini contoh vspace</marquee>
Paragraph
Paragraph
Text atau Gambar DisiniParagraph
sumber: http://vietalovely.blogspot.com

6 komentar:

moorlife mengatakan...

terima kasi mas sangat membantu ..sudah sy terap kan di wb sy
semoga sehat selalu..tks

Anggita Priasti Official mengatakan...

keren gan, mau tanya kalo buat text berjalan yang ada linknya gemana caranya gan

Unknown mengatakan...

terima kasih gan, mantap

catatan air mengatakan...

Hi..
Bagaimana buat mie saya Bergerac dipic

avhidalamsyah.id mengatakan...

Mantap gan!

avhidalamsyah.id mengatakan...

anak stimik yah ck?