Cara membuat running text di bootstrap

Udah lama banget mau bagi cara ini tapi lupa terus, dan menurut saya cara ini pasti sudah banyak yang tau makanya tidak pernah di prioritaskan memposting ini. Untungnya beberapa hari lalu ada yang tanya soal ini, jadi keingetan dan mulai buat postingan ini takut keburu lupa lagi 😀

Tulisan / Teks berjalan di HTML dapat dilakukan dengan tag dasar <marquee>, selanjutnya untuk meng-kustom text tersebut bisa ditambahkan dengan element lain didalamnya. Kita bahas dari mulai yang mendasar dulu ya…

ads by posciety

#Dasar

Siapkan tulisan dan bungkus didalam tag <marquee> lalu lihat hasilnya, contoh:

<marquee>Ini Tulisan Berjalan</marquee>

Simpan dan lihat hasilnya ! Secara default, teks akan berjalan dari kanan ke kiri dan terus berulang-ulang.

#Kecepatan

Jika kecepatan terlalu cepat atau mungkin kurang cepat, bisa atur waktu untuk slide nya ini dengan tambahan scrolldelay:

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

700 merupakan millisecond, seperti biasa HTML membaca waktu dari millisecond. Simpan dan lihat hasilnya ! Text akan berjalan seperti biasa tapi dengan kecepatan yang ditentukan.

#Title

Seperti biasa pada bahasa HTML jika menggunakan title akan memunculkan judul dari element yang disentuh (hover), ibarat seperti tombol yang diberi title.

<marquee scrolldelay="700" title="Ini Muncul Saat Hover">Ini Tulisan Berjalan</marquee>

Tulisan “ini muncul saat hover” akan muncul ketika kursor menyentuh element tersebut, pada ranah SEO title ini merupakan salah satu hal penting untuk setiap element HTML yang ingin terdeteksi mesin pencari.

#Sekali

Kamu juga bisa tampilkan tulisan berjalan hanya sekali saja, artinya tulisan tersebut akan berjalan dari arah yang ditentukan sampai ke ujung kolom element tersebut menggunakan behavior yang artinya tingkah laku, jadi kamu bisa atur tingkah laku dari tulisan berjalan ini seperti apa contohnya dengan slide:

<marquee scrolldelay="700" title="Ini Muncul Saat Hover" behavior="slide">Ini Tulisan Berjalan</marquee>

Simpan dan lihat hasilnya ! Tulisan akan berjalan dari arah kanan ke kiri sampai akhirnya ia mentok di ujung dari kolom sisi lain dan diam sehingga terlihat selamanya. Slide hanya sekali gerakan saja, ia akan bergerak kembali jika halaman di reload.

#Link / Tautan

Bisa juga menyisipkan URL didalamnya sehingga tulisan tersebut dapat di klik dan mengarah ke URL yang ditentukan, contoh:

<marquee scrolldelay="700" title="Ini Muncul Saat Hover" behavior="slide"><a href="https://posciety.com" target="_blank">Ini Tulisan Berjalan</a></marquee>

Cara menyisipkan link ini tidak berbeda jauh dengan menyisipkan link di HTML pada umumnya seperti menyisipkan link di menu yang pernah kita bahas sebelumnya.

#Merubah Arah Jalan

Seperti yang kita lihat, tulisan akan berjalan dari kanan ke kiri secara default. Untuk merubah arahnya cukup tambahkan direction alias tujuan:

<marquee title="Ini Muncul Saat Hover" behavior="slide" onmouseover="this.stop()" onmouseout="this.start()" direction="right"><a href="https://posciety.com" target="_blank">Ini Tulisan Berjalan</a></marquee>

Ketika direction-nya right artinya tujuannya ke kanan, maka tulisan akan berjalan dari kiri ke kanan. Jika ingin merubahnya ke bawah atau ke atas silahkan atur dengan up atau down.

#Berjalan Bolak Balik

Kalo kamu ikuti tutorial-tutorial di situs ini tentang Bootstrap GRID sebelumnya, pasti tau yang namanya alternate. Kamu juga bisa pakai alternate disini:

<marquee title="Ini Muncul Saat Hover" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()" direction="right"><a href="https://posciety.com" target="_blank">Ini Tulisan Berjalan</a></marquee>

Fungsinya untuk membuat tulisan berjalan bolak balik ketiak sudah mentok ke masing-masing sisi, karena bawaannya teks berjalan akan hilang sampai tidak terlihat di layar. Tapi ketika menggunakan behavior alternate ini tulisan akan bolak balik ketika mentok setiap sisi.

#Berhenti Ketika Hover

Lagi musim nih, tulisan berjalan yang berhenti ketika disentuh seperti headline pada website situs berita. Caranya cukup tambahkan onmousehover didalamnya:

<marquee scrolldelay="700" title="Ini Muncul Saat Hover" behavior="slide" onmouseover="this.stop()" onmouseout="this.start()"><a href="https://posciety.com" target="_blank">Ini Tulisan Berjalan</a></marquee>

Sebetulnya kita sudah menyisipkan javascript didalamnya yaitu onmouseover, dengan kode tersebut tulisan akan berhenti ketika disentuh. Jangan lupa untuk menambahkan onmouseout supaya ketika mouse tidak menyentuh tulisan lagi si tulisan akan berjalan lagi, jika tidak digunakan si tulisan akan berhenti dan tidak berjalan lagi ketika mouse pergi setelah hover.

#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.