Mungkin sudah banyak yang menuliskan tips cara membuat scrolling text di luar sana. Kali ini saya juga ingin sharing mengenai cara membuat scrolling text. Bedanya, di sini ada banyak jenis scrolling text dengan berbagai efek yang bisa dicoba. Silahkan pilih sesuai dengan selera dan keperluan. Jika ingin memodifikasi efek, penjelasan fungsinya ada di bawah.
Ini tampilan dan kodenya:
1. Side-in text (crolling dari kanan ke kiri)
<marquee behavior="slide" direction="left">Teks Anda melayang seperti ini</marquee><p><a style="font-size:10px;color:#999;" href="http://sepanjang-wage.com/">Bloger 2012</a></p>.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Teks Anda scrolling seperti ini
Bloger 2012
2. Side-in text (scrolling dari kiri ke kanan)
<marquee behavior="slide" direction="right">Teks Anda scrolling seperti ini</marquee><p><a style="font-size:11px;color:#999;" href="http://sepanjang-wage.com">Blogger 2012</a></p>Teks Anda scrolling seperti ini
Blogger 2012
3. Continous scrolling text (scrollingnya berkelanjutan dari kanan ke kiri)
<marquee behavior="scroll" direction="left">Teks Anda scrolling seperti ini</marquee><p><a style="font-size:11px;color:#999;" href="http://sepanjang-wage.com">Blogger 2012</a></p>Teks Anda scrolling seperti ini
Blogger 2012
4. Continous scrolling text (scrollingnya berkelanjutan dari kiri ke kanan)
<marquee behavior="scroll" direction="right">Teks Anda scrolling seperti ini</marquee><p><a style="font-size:11px;color:#999;" href="http://sepanjang-wage.com">Blogger 2012</a></p>Teks Anda scrolling seperti ini
Blogger 2012
5. Continous faster scrolling (scrolling berkelanjutan lebih cepat)
<marquee behavior="scroll" direction="left" scrollamount="30">Teks Anda scrolling seperti ini</marquee><p><a style="font-size:11px;color:#999;" href="http://sepanjang-wage.com">Blogger 2012</a></p>Teks Anda scrolling seperti ini
Blogger 2012
6. Normal Bounce
<marquee behavior="alternate">Teks Anda bouncing seperti ini</marquee><p><a style="font-size:11px;color:#999;" href="http://sepanjang-wage.com">Blogger 2012</a></p>Teks Anda bouncing seperti ini
Blogger 2012
7. Faster Bounce
<marquee behavior="alternate" scrollamount="30">Teks Anda bouncing seperti ini</marquee><p><a style="font-size:11px;color:#999;" href="http://sepanjang-wage.com">Blogger 2012</a></p>Teks Anda bouncing seperti ini
Blogger 2012
8. Scrolling-up
<marquee behavior="scroll" direction="up">Teks Anda scrolling naik seperti ini</marquee><p><a style="font-size:11px;color:#999;" href="http://sepanjang-wage.com">Blogger 2012</a></p>Teks Anda scrolling naik seperti ini
Blogger 2012
9.
<marquee behavior="scroll" direction="down">Teks Anda scrolling turun seperti ini</marquee><p><a style="font-size:11px;color:#999;" href="http://sepanjang-wage.com">Blogger 2012</a></p>Teks Anda scrolling turun seperti ini
Blogger 2012
10. Various scrolling speed
<marquee behavior="scroll" direction="right" scrollamount="5">Terimakasih</marquee><marquee behavior="scroll" direction="right" scrollamount="10">Blogger</marquee><marquee behavior="scroll" direction="right" scrollamount="20">2012</marquee><p><a style="font-size:11px;color:#999;" href="http://sepanjang-wage.com">Blogger 2012</a></p>Terimakasih
Blogger
2012
Blogger 2012
Penjelasan atribute marquee
Silahkan bereksperimen dengan setting kode di atas. Berikut ini penjelasan fungsi marquee
width |
mengatur lebar | scrollamount |
berapa jauh jaraknya saat bergerak |
height |
mengatur tinggi | loop |
berapa kali pengulangan loop |
direction |
mengatur arah | bgcolor |
setting background color dari marquee |
behavior |
memilih action: slide, bounce, atau scroll | hspace |
setting horizontal space di sekeliling marquee |
scrolldelay |
lamanya marquee sebelum action | vspace |
setting vertical space di sekeliling marquee |
