Mobil Bekas
Pasang Iklan Rumah
ads ads ads ads

Cara Membuat Marquee (Text Bergerak)

Share this history on :
Cara membuat marquee (text bergerak). 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 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 scrollamount Text 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 scrolldelay Text 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 bgcolor Text 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

Nah…demikianlah pembahasan lengkap tentang HTML Marquee berikut cara membuat marquee. Semoga bermanfaat dan silahkan dicoba

Artikel Terkait:

0 komentar:

Posting Komentar

Jika Anda menyukai Artikel ini Silahkan beri Komentar dengan Santun.komentar yang tidak santun akan di anggap spam dan akan di delete

Silahkan Masukkan Email Anda untuk Berlangganan Gratis Artikel Blog Bimantara: