Cara Membuat Teks Berjalan Di HTML (Marquee)

Assalamualaikum Wr.Wb

       Mungkin kita sering lihat Running Teks/Tulisan Berjalan baik itu di layar TV maupun di toko. Didalam HTML juga ada <tag> untuk membuat Tulisan Berjalan yaitu <marquee>. selanjutnya untuk meng-kustom text tersebut bisa ditambahkan dengan element lain didalamnya. Kita bahas dari mulai yang mendasar dulu ya

1. Dasar

Siapkan tulisan apapun untuk didalam <marquee>

    <marquee>Tulisan Berjalan</marquee>

Contoh

Tulisan Berjalan

Simpan dan lihat hasilnya ! Secara default, teks akan berjalan dari kanan ke kiri dan terus berulang-ulang tapi untuk arah berjalan nanti bisa diatur.

2. Kecepatan
Jika kecepatan terlalu cepat atau mungkin kurang cepat, bisa atur waktu untuk slide nya ini dengan tambahan scrolldelay di sisipan <marquee>


    <marquee scrolldelay="700">Tulisan Berjalan</marquee>

Contoh
Tulisan Berjalan

3. Merubah Arah Jalan
Jika mungkin anda ingin tulisan muncul dari sisi lain dengan cara merubah arah jalan. Dengan cara hanya menambahkan direction di sisipan


    <marquee direction="left">Tulisan Berjalan</marquee>

Contoh
Tulisan Berjalan

4. Berjalan Bolak Balik
Kamu juga bisa pakek alternate disini


    <marquee behavior="alternate">Tulisan Berjalan</marquee>

Contoh
Tulisan Berjalan

pada bawaannya teks berjalan akan hilang sampai tidak terlihat di layar. Tapi ketika menggunakan behavior alternate ini tulisan akan bolak balik ketika mentok setiap sisi.

5. Style
Last But Not Least, kamu bisa tambahkan CSS inline didalamnya menggunakan style=””. Misalnya ingin memberikan warna tulisan, merubah font tulisan, merubah ukuran tulisan, jenis tulisan, bahkan sampai warna latar alias background. Tapi untuk background ini kamu bisa cukup tambahkan bgcolor=”” saja, itu sudah mewakili perubahan warna latar marquee.

      Hanya itu saja yang bisa kasih karena saya juga pemula atau juga sedang tahap belajar pemrogaman bukan saya bukan ahlinya dari ahli. Terima kasih telah mengunjungi blog saya, sekian dan terima kasih
Wassalamualaikum Wr.Wb 

Share this post