Scrolling Text ( teks berjalan )

alaman ini berisi kode copy / paste untuk bergulir teks.
Cara termudah untuk membuat teks bergulir adalah dengan menggunakan tag HTML marquee. Anda memberikan teks sebuah gulungan horizontal (dari kanan ke kiri, kiri ke kanan) atau gulir vertikal (atas ke bawah, atau bawah ke atas) - itu pilihan Anda!

Kanan ke Kiri (RTL)

Bagian ini berisi teks yang gulungan horizontal (kanan ke kiri, kiri ke kanan, atau kombinasi). Seperti yang Anda lihat, ada sejumlah pilihan dengan scroll horisontal Anda.

Slide-In Text

Teks ini slide dari kanan, kemudian tetap di tempat itu. Anda akan perlu untuk me-refresh halaman ini untuk melihat efek lagi.

Code	Example
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>	Your slide-in text goes here

Continuous scrolling text (RTL)

Code	Example
<marquee behavior="scroll" direction="left">Your continuous scroll text goes here</marquee>	Your continuous scroll text goes here

Faster Scrolling

Contoh ini menggunakan scrollamount = "30" untuk meningkatkan kecepatan gulir.

Bergulir lebih cepat bekerja lebih baik pada bergulir terus menerus dibandingkan dengan slide-dalam teks. Hal ini karena teks slide-in berhenti setelah meluncur di. Jika slide dalam terlalu cepat, banyak pengguna mungkin akan kehilangan slide-in efek sama sekali.

Code	Example
<marquee behavior="scroll" direction="left" scrollamount="30">Your continuous scrollable text goes here</marquee>	Your continuous scrollable text goes here

Kiri ke Kanan (LTR)

Slide-In Text

Teks ini slide dari kiri, kemudian tetap di tempat itu. Anda akan perlu untuk me-refresh halaman ini untuk melihat efek lagi.

Code	Example
<marquee behavior="slide" direction="right">Your slide-in text goes here</marquee>	Your slide-in text goes here

Continuous scrolling text (LTR)

Code	Example
<marquee behavior="scroll" direction="right">Your continuous scrolling text goes here</marquee>	Your continuous scrolling text goes here

Text bouncing back and forth:

Kecepatan normal
Teks ini memantul pada kecepatan default.

Code	Example
<marquee behavior="alternate">Your bouncing text goes here</marquee>	Your bouncing text goes here

Faster Bounce

Contoh ini menggunakan scrollamount = "30" untuk mempercepat bergulir / memantul teks.

Code	Example
<marquee behavior="alternate" scrollamount="30">Your fast bouncing text goes here</marquee>	Your fast bouncing text goes here

Text Scrolling Up

Teks ini memiliki gulir vertikal - dimulai di bagian bawah dan bergerak naik. Seperti beberapa contoh sebelumnya, Anda dapat mengatur kecepatan gulir dengan menggunakan atribut scrollamount. Anda juga bisa membuat slide vertikal dengan menggunakan perilaku = "slide".

Code	Example
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>	Your upward scrolling text goes here

Text Scrolling Down

Teks ini juga memiliki gulir vertikal, tapi kali ini dimulai di bagian atas dan bergerak ke bawah.

Code	Example
<marquee behavior="scroll" direction="down">Your downward scroller text goes here</marquee>	Your downward scroller text goes here

Various Scrolling Speeds

Contoh ini menunjukkan 3 kecepatan bergulir berbeda.

Code	Example
<marquee behavior="scroll" direction="right" scrollamount="1">Tortoise</marquee><br /> <marquee behavior="scroll" direction="right" scrollamount="10">Hare</marquee><br /> <marquee behavior="scroll" direction="right" scrollamount="20">Cheetah</marquee>	Tortoise Hare Cheetah

Jumping Text

Contoh berikut menggunakan atribut scrolldelay untuk memperlambat teks bergulir ke bawah dan membuatnya terlihat seperti itu melompat di layar. Sebenarnya, contoh juga menggunakan atribut scrollamount untuk meningkatkan ukuran masing-masing melompat.

Code	Example
<marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="500">Your continuous scroll text goes here</marquee>	Your continuous scroll text goes here

Falling Text

Anda dapat menggunakan teks bergulir untuk beberapa efek yang besar. Lihat teks jatuh ini

ScrollScrolling text effects......cool!Scrolling text effects...Scroll...Scrolling text...Text effects...Marquees...Scrolling text effects...Scrolling effects...MarqueesScrolling effects...Scrolling text...effects...Scrolling text effects...Scrolling text effects...Snow effects...Snow?Rain?Confetti?Scrolling text effects...

KODE

<marquee direction="down" scrollamount="3" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 100px; left: 18%; position: absolute; top: 47%; z-index: 2;">Scroll</marquee><marquee direction="down" scrollamount="7" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 50%; left: 1%; position: absolute; top: 39%; z-index: 2;">Scrolling text effects...</marquee><marquee direction="down" scrollamount="4" style="color: lime; font-family: Cursive; font-size: 14pt; height: 302px; left: 11%; position: absolute; top: 7%; z-index: 2;">...cool!</marquee><marquee direction="down" scrollamount="3" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 435px; left: 25%; position: absolute; top: 33%; z-index: 2;">Scrolling text effects...</marquee><marquee direction="down" scrollamount="2" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 432px; left: 15%; position: absolute; top: 13%; z-index: 2;">Scroll...</marquee><marquee direction="down" scrollamount="1" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 369px; left: 8%; position: absolute; top: 29%; z-index: 2;">Scrolling text...</marquee><marquee direction="down" scrollamount="7" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 289px; left: 30%; position: absolute; top: 17%; z-index: 2;">Text effects...</marquee><marquee direction="down" scrollamount="7" style="color: #ff9900; font-family: Cursive; font-size: 14pt; height: 78px; left: 46%; position: absolute; top: 27%; z-index: 2;">Marquees...</marquee><marquee direction="down" scrollamount="5" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 56px; left: 16%; position: absolute; top: 17%; z-index: 2;">Scrolling text effects...</marquee><marquee direction="down" scrollamount="2" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 194px; left: 30%; position: absolute; top: 46%; z-index: 2;">Scrolling effects...</marquee><marquee direction="down" scrollamount="6" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 251px; left: 2%; position: absolute; top: 10%; z-index: 2;">Marquees</marquee><marquee direction="down" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 154px; left: 48%; position: absolute; top: 24%; z-index: 2;">Scrolling effects...</marquee><marquee direction="down" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 82px; left: 41%; position: absolute; top: 22%; z-index: 2;">Scrolling text</marquee><marquee direction="down" scrollamount="3" style="color: magenta; font-family: Cursive; font-size: 14pt; height: 70px; left: 46%; position: absolute; top: 2%; z-index: 2;">...effects...</marquee><marquee direction="down" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 334px; left: 42%; position: absolute; top: 15%; z-index: 2;">Scrolling text effects...</marquee><marquee direction="down" scrollamount="7" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 167px; left: 40%; position: absolute; z-index: 2;">Scrolling text effects...</marquee><marquee direction="down" scrollamount="7" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 420px; left: 45%; position: absolute; top: 18%; z-index: 2;">Snow effects...</marquee><marquee direction="down" scrollamount="7" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 12px; left: 22%; position: absolute; top: 26%; z-index: 2;">Snow?</marquee><marquee direction="down" scrollamount="2" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 366px; left: 49%; position: absolute; top: 4%; z-index: 2;">Rain?</marquee><marquee direction="down" scrollamount="1" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 358px; left: 26%; position: absolute; top: 32%; z-index: 2;">Confetti?</marquee><marquee direction="down" scrollamount="3" style="color: #ffcc00; font-family: Cursive; font-size: 14pt; height: 130px; left: 3%; position: absolute; top: 14%; z-index: 2;">Scrolling text effects...</marquee>