Membuat teks berjalan di halaman web bisa menjadi salah satu cara menarik untuk menampilkan pesan atau informasi penting kepada pengunjung. Dalam HTML, Anda dapat menggunakan tag <marquee> untuk menciptakan efek teks berjalan dengan mudah. Meski tag ini tidak lagi dianggap sebagai standar dalam HTML5, masih banyak yang menggunakannya karena kemudahannya dalam menghasilkan efek visual sederhana tanpa perlu kode JavaScript atau CSS yang rumit. Artikel ini akan membahas cara menggunakan tag <marquee> serta beberapa variasinya, sehingga Anda bisa menambahkan efek ini ke dalam website atau blog Anda.
Tag <marquee> adalah tag HTML yang digunakan untuk membuat teks berjalan dari satu sisi halaman ke sisi lainnya. Efek ini memberikan sentuhan dinamis pada tampilan situs web, dan sangat berguna untuk menyoroti informasi yang penting atau sekadar membuat tampilan halaman lebih interaktif. Meskipun demikian, karena tag ini dianggap usang dalam HTML5, banyak pengembang web yang mulai beralih menggunakan animasi CSS untuk membuat efek serupa. Namun, bagi pemula yang ingin dengan cepat memahami cara membuat teks berjalan, tag <marquee> tetap bisa digunakan.
Cara Membuat Teks Berjalan dengan Tag Marquee
Berikut adalah langkah-langkah dasar untuk membuat teks berjalan menggunakan tag <marquee>:
1. Membuat Teks Berjalan Sederhana Untuk membuat teks berjalan dari kiri ke kanan atau sebaliknya, Anda bisa menggunakan kode sederhana berikut:
<marquee>Ini adalah contoh teks berjalan</marquee>
Teks di dalam tag <marquee> akan bergerak secara otomatis dari kiri ke kanan, memberikan efek animasi dasar. Ini adalah implementasi yang paling sederhana dari penggunaan tag ini.
2. Mengubah Arah Pergerakan Teks Jika Anda ingin mengubah arah pergerakan teks, Anda bisa menambahkan atribut direction. Misalnya, jika Anda ingin teks berjalan dari kanan ke kiri, kode yang digunakan adalah sebagai berikut:
<marquee direction=”right”>Teks berjalan ke arah kanan</marquee>
3. Mengatur Kecepatan Teks Kecepatan teks berjalan juga bisa diatur dengan atribut scrollamount. Semakin tinggi angkanya, semakin cepat teks tersebut akan bergerak:
<marquee scrollamount=”10″>Teks berjalan dengan kecepatan tinggi</marquee>
Jika Anda ingin memperlambat gerakan teks, cukup kurangi angkanya:
<marquee scrollamount=”3″>Teks berjalan lebih lambat</marquee>
4. Mengulang Pergerakan Teks Secara default, teks dalam tag <marquee> akan terus bergerak tanpa henti. Namun, jika Anda ingin mengontrol berapa kali teks tersebut berputar, Anda bisa menggunakan atribut loop:
<marquee loop=”5″>Teks ini akan berputar lima kali</marquee>
5. Menambahkan Teks Berjalan Vertikal Tidak hanya secara horizontal, Anda juga bisa membuat teks berjalan secara vertikal dengan menambahkan atribut direction dan mengaturnya ke “up” atau “down”:
<marquee direction=”up”>Teks berjalan ke atas</marquee>
<marquee direction=”down”>Teks berjalan ke bawah</marquee>
Perlu diingat bahwa penggunaan tag <marquee> dianggap sudah ketinggalan zaman dalam pengembangan web modern. Tag ini tidak lagi didukung oleh standar HTML5, dan beberapa browser mungkin tidak menampilkan efek teks berjalan secara sempurna. Sebagai gantinya, pengembang web dianjurkan untuk menggunakan CSS atau JavaScript untuk menciptakan animasi yang lebih fleksibel dan responsif. Namun, bagi Anda yang baru memulai belajar HTML atau ingin menggunakan efek ini untuk proyek sederhana, <marquee> masih bisa menjadi pilihan yang cepat dan mudah.
Untuk berbagai tutorial menarik lainnya seputar teknologi dan pengembangan web, kunjungi blog Halal.id atau baca artikel terkait di blog seputar tutorial.
