Belajar HTML (18): Membuat Teks Berjalan Menggunakan Marquee

Baiklah, langsung saja kita masuk bahasan tentang bagaimana membuat teks berjalan di halaman HTML. Sudah disebutkan di judul, tag yang akan digunakan adalah <marquee>. Tentunya teks berjalan ini sudah sering kita lihat ya, mari kita buat contohnya.

Kode paling umum untuk membuat teks berjalan cukup dengan menggunakan tag <marquee> saja. Misalnya:

<marquee>
   Ini adalah contoh marquee
</marquee>

Hasilnya akan terlihat teks berjalan dengan tulisan seperti di atas, arah gerakan defaultnya adalah dari kanan ke kiri full layar. Teks ini akan terus bergerak tanpa henti, jika sudah sampai di posisi paling kiri akan tampil lagi dari kanan, begitu seterusnya.

Width

Apakah bisa dibatasi lebarnya tidak selebar layar? Bisa! Kita bisa menambahkan atribut width="berapa_persen", misal dibuat 40%, sehingga terlihat jadi seperti ini: <marquee width="40%">. Hasilnya akan seperti kode pertama tetapi lebarnya hanya sebesar 40% dari layar.

Direction

Secara default kan arahnya dari kanan ke kiri ya. Jika mau diubah dari kiri ke kanan bagaimana? Kita bisa gunakan atribut direction="arah". Ada 4 arah yang bisa digunakan yaitu up (ke atas), down (ke bawah), right (ke kanan) dan left (ke kiri). Oleh karena itu jika ingin agar arahnya bergerak dari bawah ke atas, atributnya bisa diatur seperti ini: <marquee direction="up">.

Behavior

Bentuk pergerakannya bagaimana? Ada 3, yaitu scroll, slide dan alternate. Diatur pada atribut behavior. Scroll adalah bentuk default, jika tidak diset maka marquee akan menganggapnya sebagai scroll. Slide akan menghasilkan teks berjalan yang apabila sudah sampai di sisi tujuan akan berhenti, kecuali diatur berapa kali gerakannya. Alternate akan menghasilkan gerakan bolak-balik, Jika teks sudah sampai di kiri, akan bergerak kembali ke arah kanan, sampai di kanan akan kembali ke kiri, dan seterusnya. Alternate ini seperti memantulkan teks 😎

Atribut yang digunakan adalah behavoir="gerakan", silakan ganti gerakan dengan yang 3 macam di atas.

Loop

Loop dipakai jika kita ingin menentukan batas jumlah gerakan. Misalnya hanya ini 3 kali saja atau berapa. Diatur dengan atribut loop="berapa". Loop cocok digunakan bersama-sama dengan behavior dalam bentuk slide. Kalau diset loop=”3″ dan behavior=”slide”, maka jadinya hanya akan terjadi 3 kali pergerakan berbentuk slide, setelah 3 kali teks akan diam.

Height

Bisa diatur tinggi dari objek marquee? Tentu saja bisa. Tetapi pengaturan height ini lebih banyak digunakan saat kita menerapkan arah gerakan ke atas atau ke bawah. Jarang digunakan untuk gerakan ke kanan dan ke kiri meskipun tetap bisa diterapkan. Atribut yang digunakan adalah height diikuti ukuran tinggi dalam satuan piksel. Contohnya height="30px".

Oke sampai sini, ada pertanyaan? Seperti kuliah saja 😉

Masih ada beberapa atribut lagi, kita lanjutkan, oke…