Pendahuluan
Tulisan berjalan (marquee) adalah efek pergerakan teks yang digunakan dalam desain web untuk menarik perhatian pengunjung dengan teks yang bergerak secara horizontal atau vertikal, menciptakan elemen visual menarik di halaman web.
Mengapa Anda Perlu Tahu Cara Membuat Tulisan Berjalan di HTML:
Peningkatan Daya Tarik: Teks berjalan bisa memberikan sentuhan khusus yang memikat mata dan memastikan pesan Anda terlihat oleh pengunjung.
Penggunaan yang Fleksibel: Anda dapat menggunakannya untuk menyoroti informasi penting, berita terbaru, atau bahkan sekadar pesan penyambutan.
Kesempatan Kreatif: Dengan pemahaman yang baik tentang cara membuat teks berjalan, Anda dapat mengkreasikan efek-efek unik yang sesuai dengan karakter situs Anda.
Kompatibilitas: Meskipun elemen
<marquee>klasik sudah usang, pemahaman dasar tentang cara membuat teks berjalan masih relevan dalam pengembangan web modern. Anda dapat mencapai efek yang sama dengan menggunakan HTML dan CSS.
<marquee> untuk menciptakan efek pergerakan teks dalam desain web.Kelebihan Marquee
Berikut adalah beberapa kelebihan marquee pada HTML:
- Marquee dapat menambahkan efek animasi pada halaman web, sehingga dapat membuat tampilan halaman web lebih menarik dan berbeda dari halaman web lainnya.
- Marquee dapat membantu menarik perhatian pengunjung halaman web terhadap informasi tertentu, seperti iklan atau promo produk.
- Marquee dapat membantu meningkatkan interaksi pengguna dengan halaman web, karena pengguna dapat melihat informasi yang bergerak atau berubah dengan sendirinya.
Kekurangan Marquee
Berikut adalah beberapa kekurangan marquee pada HTML:
- Marquee dapat mengganggu pengalaman pengguna karena teks atau gambar yang bergerak dapat mengalihkan perhatian pengguna dari informasi utama yang ingin disampaikan oleh halaman web.
- Marquee dapat mengurangi kecepatan dan performa halaman web karena animasi yang bergerak membutuhkan sumber daya CPU dan memori yang cukup besar.
- Marquee dapat membingungkan pengguna yang memiliki masalah kesehatan tertentu, seperti epilepsi atau gangguan penglihatan.
Oleh karena itu, penggunaan marquee harus dilakukan dengan bijak dan sebaiknya hanya digunakan untuk menampilkan informasi yang penting dan tidak terlalu sering digunakan dalam halaman web. Sebagai alternatif, dapat menggunakan animasi sederhana atau gambar statis yang dapat memberikan efek visual yang sama tanpa mengganggu pengalaman pengguna atau performa halaman web.
Menggunakan Elemen <marquee>
Elemen HTML <marquee> adalah cara paling sederhana untuk membuat tulisan berjalan. Berikut langkah-langkahnya:
Langkah 1: Membuat Elemen Marquee
<marquee>Tulisan Berjalan</marquee>
Ini akan membuat teks "Tulisan Berjalan" bergerak secara default dari kiri ke kanan.
Langkah 2: Mengatur Kecepatan Berjalan
Untuk mengatur kecepatan berjalan, Anda dapat menggunakan atribut scrollamount. Nilai atribut ini mengukur kecepatan pergerakan dalam piksel per detik. Contoh:
<marquee scrollamount="5">Tulisan Berjalan</marquee>
Nilai "5" akan membuat teks bergerak dengan kecepatan 5 piksel per detik. Sesuaikan sesuai keinginan Anda.
Langkah 3: Mengatur Arah Berjalan
Anda juga dapat mengubah arah berjalan dengan atribut direction. Nilai "left" atau "right" akan mengatur arah horizontal, dan "up" atau "down" akan mengatur arah vertikal. Contoh:
<marquee direction="up">Tulisan Berjalan</marquee>
Langkah 4: Menghentikan Saat Hover
Jika Anda ingin menghentikan bergeraknya teks saat pengguna mengarahkan kursor mouse ke atasnya, Anda dapat menggunakan atribut behavior.
<marquee behavior="alternate">Tulisan Berjalan</marquee>
Ini akan membuat teks bergerak bolak-balik dan berhenti saat dihover.
Apa saja atribut dan opsi yang tersedia untuk mengontrol perilaku tulisan berjalan?
Atribut dan opsi yang tersedia untuk mengontrol perilaku tulisan berjalan (marquee) termasuk "scrollamount" untuk mengatur kecepatan pergerakan, "direction" untuk mengubah arah pergerakan, "behavior" untuk menghentikan saat dihover, dan "loop" untuk mengulang pergerakan.
Bagaimana memastikan bahwa pengguna dengan berbagai perangkat dan aksesibilitas dapat mengakses tulisan berjalan?
Untuk memastikan aksesibilitas dan kompatibilitas dengan berbagai perangkat, pertimbangkan menggantikan elemen <marquee> dengan CSS dan JavaScript untuk mengontrol gerakan, serta pastikan teks berjalan tetap dapat dibaca dengan mudah oleh pengguna, termasuk mereka yang menggunakan pembaca layar atau perangkat asistensi aksesibilitas.
Catatan Akhir
Meskipun elemen <marquee> masih bekerja, perlu diingat bahwa penggunaan berlebihan dapat mengganggu pengalaman pengguna dan dianggap usang. Sebaiknya digunakan dengan bijak dan dipertimbangkan alternatif modern seperti CSS dan animasi untuk mencapai efek serupa dengan lebih banyak kendali tampilan dan aksesibilitas yang lebih baik.
Sekarang Anda tahu cara membuat tulisan berjalan dengan HTML di dalam halaman web. Bermain-main dengan efek ini dengan bijak dan pastikan selalu memprioritaskan pengalaman pengguna Anda.
Orang lain juga bertanya (FAQ)
bagaimana cara membuat teks berjalan (marquee) untuk pemula?
Bagi Anda yang baru pertama kali mempelajarinya dan masih bingung, Anda dapat mempelajarinya tentang panduan lengkap membuat teks berjalan untuk pemula.
Apa kelebihan dan kekurangan teks berjalan (marquee)?
berikut adalah pembahasan yang perlu Anda ketahui tentang kelebihan dan kekurangan teks berjalan (marquee).
Bagaimana cara mengatur arah gerakan teks berjalan (marquee)?
Mengatur arah gerakan teks pada Running Text atau teks berjalan adalah dengan menggunakan atribut direction dengan nilai left, right, up atau down. Pelajari selengkapnya tentang cara mengatur arah gerakan teks berjalan.
Bagaimana cara mengatur perilaku gerakan teks, seperti: bergerak sekali lalu berhenti, berputar atau bolak-balik?
Mengatur perilaku gerakan teks, seperti: bergerak sekali lalu berhenti, berputar atau bolak-balik adalah dengan menggunakan atribut behavior dengan nilai scroll, slide atau alternate. Pelajari selengkapnya tentang cara mengatur perilaku gerakan teks [bergerak sekali lalu berhenti, berputar atau bolak-balik].
Bagaimana cara mengatur posisi teks marquee?
Cara mengatur posisi teks marquee adalah dengan menggunakan atribut align dengan nilai left, right, center atau justify. Pelajari selengkapnya tentang cara mengatur posisi teks marquee.
Bagaimana cara memberi warna tulisan Running text/Marquee/teks berjalan?
Cara memberi warna tulisan Running text adalah dengan menggunakan atribut bgcolor dengan memberi nilai Nama warna* atau kode warna*. Pelajari selengkapnya tentang cara memberi warna tulisan Running text/Marquee/teks berjalan.
Bagaimana cara mengatur kecepatan gerakan Running text/Marquee/teks berjalan?
Cara mengatur kecepatan gerakan marquee, semakin besar angka maka semakin cepat gerakannya adalah dengan menggunakan atribut scrollamount dengan memberi nilai angka*, namun untuk mengatur waktu jeda/memperlambatnya, gunakan scrolldelay. Pelajari selengkapnya tentang cara mengatur kecepatan gerakan marquee dengan scrollamount, bandingkan dengan cara mengatur jeda gerakan marquee dengan scrolldelay.
Bagaimana cara mengatur waktu delay (tunda) gerakan per langkah teks berjalan?
Cara mengatur waktu delay (tunda) gerakan per langkah teks berjalan adalah dengan menggunakan atribut scrolldelay dengan memberi nilai angka*. Pelajari selengkapnya tentang cara mengatur waktu delay (tunda) gerakan per langkah teks berjalan dengan CSS atau mengatur waktu tunda animasi marquee dengan JavaScript onstart attribute.
Bagaimana cara mengatur jumlah pengulangan teks berjalan?
Cara mengatur jumlah pengulangan teks berjalan adalah dengan menggunakan atribut loop dengan memberi nilai angka* atau infinite. Pelajari selengkapnya tentang cara mengatur jumlah pengulangan teks berjalan.
Bagaimana cara mengatur lebar blok teks marquee dalam pixel atau persen?
Cara mengatur lebar blok teks marquee dalam pixel atau persen adalah dengan menggunakan atribut width dengan memberi nilai px atau %. Pelajari selengkapnya tentang cara mengatur lebar blok teks marquee dalam pixel atau persen.
Bagaimana cara mengatur tinggi blok teks marquee dalam pixel atau persen?
Cara mengatur tinggi blok teks marquee dalam pixel atau persen adalah dengan menggunakan atribut height dengan memberi nilai px atau %. Pelajari selengkapnya tentang cara mengatur tinggi blok teks marquee dalam pixel atau persen.
Bagaimana cara menampilkan pesan yang akan muncul saat mouse berada di atas teks marquee?
Cara memberikan pesan yang akan muncul saat mouse berada di atas teks marquee adalah dengan menggunakan atribut title dengan nilai teks pesan*. Pelajari selengkapnya tentang cara menampilkan pesan yang akan muncul saat mouse berada di atas teks marquee.
Bagaimana cara menghentikan teks marquee saat disorot mouse?
Cara menghentikan teks marquee saat disorot mouse adalah dengan menggunakan atribut onmouseover dengan nilai this.stop(). Pelajari selengkapnya tentang cara menghentikan teks marquee saat disorot mouse.
Bagaimana cara menjalankan teks marquee ketika mouse menjauh?
Cara menjalankan teks marquee ketika mouse menjauh adalah dengan menggunakan atribut onmouseout dengan nilai this.start(). Pelajari selengkapnya tentang cara menjalankan teks marquee ketika mouse menjauh.
Bagaimana cara mengatur jarak kiri dan kanan teks marquee?
Cara mengatur jarak kiri dan kanan teks marquee adalah dengan menggunakan atribut hspace dengan nilai px. Pelajari selengkapnya tentang cara mengatur jarak kiri dan kanan teks marquee.
Bagaimana cara mengatur jarak atas dan bawah teks marquee?
Cara mengatur jarak atas dan bawah teks marquee adalah dengan menggunakan atribut vspace dengan nilai px. Pelajari selengkapnya tentang cara mengatur jarak atas dan bawah teks marquee.
Bagaimana cara membuat teks berjalan dengan efek warna?
Cara membuat teks berjalan dengan efek warna adalah dengan menggunakan atribut style dengan nilai "color: red*Blue*Yellow*;". Pelajari selengkapnya tentang cara membuat teks berjalan dengan efek warna.
Jadi, Pertanyaan-pertanyaan dan jawaban atribut di atas dapat Anda padukan dengan tag <marquee> sesuai kreasi masing-masing.