Cara Membuat Tulisan Berjalan

Cara Membuat Tulisan Berjalan - Anda dapat membuat tulisan, teks atau bahkan gambar berjalan menggunakan salah satu kode pada HTML yaitu dengan marquee tag. Anda dapat membuat gambar atau tulisan berjalan dari kanan ke kiri, kiri ke kanan, atas ke bawah, atau bawah ke atas.

Cara Membuat Tulisan Berjalan

Contoh kode marquee
Perhatian! Jika Anda tidak dapat melihat contoh, kemungkinan bahwa browser Anda tidak mendukung tag marquee.
- Slide-in teks
Teks ini berjalan dari kanan, kemudian akan berhenti di seberang (kiri). Anda akan perlu untuk me-refresh halaman ini untuk melihat efeknya lagi.
Kodenya:

<marquee behavior="slide" direction="left">teks anda</marquee>

<marquee behavior="slide" direction="left">teks anda</marquee>
Hasilnya:
teks anda
- Teks Berjalan Terus-menerus
Kodenya:

<marquee behavior="scroll" direction="left">teks anda</marquee>

<marquee behavior="scroll" direction="left">teks anda</marquee>
Hasilnya:
teks anda
- Teks Berjalan Bolak-balik
Kodenya:

<marquee behavior="alternate">teks bolak-balik</marquee>

<marquee behavior="alternate">teks bolak-balik</marquee>
Hasilnya:
teks bolak-balik
- Teks Berjalan Ke Atas
Kodenya:

<marquee  behavior="scroll" direction="up">teks ke atas</marquee>

<marquee behavior="scroll" direction="up">teks ke atas</marquee>
Hasilnya:
teks ke atas
- Mengubah Kecepatan Tulisan atau Teks Berjalan
Kodenya:

<marquee behavior="scroll" direction="left" scrollamount="1">berjalan lambat</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">berjalan sedang</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">berjalan cepat</marquee>

<marquee behavior="scroll" direction="left" scrollamount="1">berjalan lambat</marquee><marquee behavior="scroll" direction="left" scrollamount="10">berjalan sedang</marquee><marquee behavior="scroll" direction="left" scrollamount="20">berjalan cepat</marquee>
Hasilnya:
berjalan lambat
berjalan sedang
berjalan cepat
- Gambar Berjalan
Cukup ganti bagian http://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.info/logo.png dengan lokasi atau URL gambar Anda sendiri.
Kodenya:

<marquee behavior="scroll" direction="left"><img src="http://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.info/logo.png" width="100" height="100" alt="smile" /></marquee>

<marquee behavior="scroll" direction="left"><img src="http://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.info/logo.png" width="100" height="100" alt="smile" /></marquee>
Hasilnya:

- Gambar dan Tulisan Berjalan
Cukup tambahkan teks Anda di bawah tag gambar (tapi masih dalam tag marquee).
Kodenya:

<marquee behavior="scroll" direction="left">
<img src="http://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.info/logo.png" width="100" height="100" alt="smile" />
<p>Contoh teks di bawah gambar <a href="http://blogger-id.net/2012/12/cara-membuat-tulisan-berjalan.html">marquee</a>.</p>
</marquee>

<marquee behavior="scroll" direction="left"><img src="http://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.infohttp://www.carawebs.info/logo.png" width="100" height="100" alt="smile" /><p> Contoh teks di bawah gambar <a href="http://blogger-id.net/2012/12/cara-membuat-tulisan-berjalan.html">marquee</a>.</p> </marquee>
Hasilnya:


Contoh teks di bawah gambar marquee.

- Efek Keren dengan marquee
Anda dapat menggunakan marquee tag untuk beberapa efek yang keren.
Kodenya:
<marquee style="z-index:2;position:absolute;left:18%;top:47%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:100px;"scrollamount="3" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:1%;top:39%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:50%;"scrollamount="7" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:11%;top:7%;font-family:Cursive;font-size:14pt;color:lime;height:302px;"scrollamount="4" direction="down">...cool!</marquee><marquee style="z-index:2;position:absolute;left:25%;top:33%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:435px;"scrollamount="3" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:15%;top:13%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:432px;"scrollamount="2" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:8%;top:29%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:369px;"scrollamount="1" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:30%;top:17%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:289px;"scrollamount="7" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:46%;top:27%;font-family:Cursive;font-size:14pt;color:#f90;height:78px;"scrollamount="7" direction="down">Marquees...</marquee><marquee style="z-index:2;position:absolute;left:16%;top:17%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:56px;"scrollamount="5" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:30%;top:46%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:194px;"scrollamount="2" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:2%;top:10%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:251px;"scrollamount="6" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:48%;top:24%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:154px;"direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:41%;top:22%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:82px;"direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:46%;top:2%;font-family:Cursive;font-size:14pt;color:Fuchsia;height:70px;"scrollamount="3" direction="down">...effects...</marquee><marquee style="z-index:2;position:absolute;left:42%;top:15%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:334px;"direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:40%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:167px;"scrollamount="7" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:45%;top:18%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:420px;"scrollamount="7" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:22%;top:26%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:12px;"scrollamount="7" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:49%;top:4%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:366px;"scrollamount="2" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:26%;top:32%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:358px;"scrollamount="1" direction="down">Marquee effects... cool!</marquee><marquee style="z-index:2;position:absolute;left:3%;top:14%;font-family:Cursive;font-size:14pt;color:#ffcc00;height:130px;"scrollamount="3" direction="down">Marquee effects... cool!</marquee>
Hasilnya:

Marquee effects... cool!Marquee effects... cool!...cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquees...Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!...effects...Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!Marquee effects... cool!

Catatan: Untuk mengubah arah berjalannya, Anda dapat mengganti nilai pada atribut direction.
Tambahan: Tentang Atribut

Cara Membuat Tulisan Berjalan

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <marquee direction="left"> digunakan untuk membuat tulisan, teks atau gambar berjalan dari kiri ke kanan. Tag yang digunakan adalah marquee dan atribut yang menyertainya adalah direction dengan nilai left. Nilai atribut direction hanya bisa berupa right, left, up atau down.