Berikut adalah contoh penggunaan marquee CSS untuk membuat teks bergulir. Metode ini memenuhi standar karena menggunakan animasi CSS untuk mencapai efek pengguliran
Lari
Stack editor Unstack editor
Pratinjau Editor
Anda juga dapat menggunakan CSS untuk membuat teks slide-in, pengguliran vertikal, teks memantul, dll
HTML
Elemen
Contoh berikut menggunakan tag HTML . Sama seperti metode CSS, metode HTML juga dapat digunakan untuk memberikan teks gulungan horizontal [dari kanan ke kiri, kiri ke kanan], gulungan vertikal [dari atas ke bawah, atau dari bawah ke atas], serta pantulan.
Tag Non-Standar
Tag _______________ bukan tag HTML resmi. Lihat marquee CSS untuk marquee yang sesuai standar
Kanan ke Kiri [RTL]
Bagian ini berisi teks yang bergulir secara horizontal [kanan ke kiri, kiri ke kanan, atau kombinasi]. Seperti yang Anda lihat, ada sejumlah opsi dengan gulir horizontal Anda
Teks Slide-In
Teks ini meluncur dari kanan, lalu tetap di tempatnya. Anda perlu menyegarkan halaman ini untuk melihat efeknya lagi
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Teks bergulir terus-menerus [RTL]
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Menggulir lebih cepat
Contoh ini menggunakan scrollamount="30"
untuk meningkatkan kecepatan gulir
Pengguliran yang lebih cepat berfungsi lebih baik pada pengguliran terus-menerus dibandingkan dengan teks slide-in. Ini karena teks slide-in berhenti setelah meluncur masuk. Jika slide masuk terlalu cepat, banyak pengguna mungkin melewatkan efek slide masuk sama sekali
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Kiri ke Kanan [LTR]
Teks Slide-In
Teks ini meluncur dari kiri, lalu tetap di tempatnya. Anda perlu menyegarkan halaman ini untuk melihat efeknya lagi
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Teks bergulir terus-menerus [LTR]
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Teks memantul bolak-balik
Kecepatan Normal
Teks ini memantul dengan kecepatan default
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Memantul lebih cepat
Contoh ini menggunakan scrollamount="30"
untuk mempercepat teks bergulir/memantul
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Teks Menggulir ke Atas
Teks ini memiliki gulungan vertikal - dimulai dari bawah dan bergerak ke atas. Seperti beberapa contoh sebelumnya, Anda dapat menyesuaikan kecepatan gulir dengan menggunakan atribut scrollamount
. Anda juga dapat membuat slide vertikal dengan menggunakan behavior="slide"
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Teks Bergulir ke Bawah
Teks ini juga memiliki gulungan vertikal, tetapi kali ini dimulai dari atas dan bergerak ke bawah
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Berbagai Kecepatan Gulir
Contoh ini menunjukkan 3 kecepatan pengguliran yang berbeda
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Teks Melompat
Contoh berikut menggunakan atribut scrolldelay
untuk memperlambat teks bergulir dan membuatnya terlihat seperti melompat melintasi layar. Sebenarnya, contoh juga menggunakan atribut scrollamount
untuk meningkatkan ukuran setiap lompatan
Contoh
Lari
Stack editor Unstack editor
Pratinjau Editor
Kompatibilitas Peramban
Beberapa browser tidak membuat efek melompat. Sebaliknya, teks akan bergulir dengan lancar
Atribut Marquee
Tag menerima sejumlah atribut [beberapa di antaranya termasuk dalam contoh di atas]. Jangan ragu untuk bereksperimen dengan setelan ini untuk melihat efeknya pada teks bergulir Anda. Daftar lengkap atribut adalah
0 Mendeteksi Lebar marqueescrollamount
Bagaimana jauh untuk melompat saat bergerak
2 mengatur ketinggian marquee
3 kali loop ______________________________________________________________________________________________________________________________________________H Directie __ __ __ __ __ __ __ __ __. Teks Jatuh
Anda dapat menggunakan teks bergulir untuk beberapa efek hebat. Lihat teks jatuh ini [dihasilkan dengan Falling Text Generator]
Gulir Menggulir efek teks. dingin. Menggulir efek teks. Menggulir. Teks bergulir. efek teks. Tenda. Menggulir efek teks. Efek bergulir. Efek MarqueesScrolling. Teks bergulir. efek. Menggulir efek teks. Menggulir efek teks. Efek salju. Salju?Hujan?Konfeti?Efek teks bergulir