Cara membuat scrolling text dengan berbagai efek

Artikel ini telah dibaca 3808 kali.

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

Selamat mencoba

Banyak yang mencari:

Tags: bounce text efek teks berjalan running text scrolling text teks berjalan teks berputar

author
Dosso Sang Isahi adalah mantan guru, sekarang berprofesi sebagai networker. Saat ini mengelola beberapa bisnis online, juga aktif dalam bidang sosial media marketing. Pria yang senang belajar hal yang berbau teknis dan IT ini bersama keluarga kecilnya tinggal di Sidoarjo, sedang menikmati kebebasan karier yang telah dicapainya.

Related Post "Cara membuat scrolling text dengan berbagai efek"

Cara menekan Bounce Rate untuk meningkatkan page view
  Jika Anda memiliki blog Wordpress selfhosted
10 langkah teknik onpage SEO yang wajib dilakukan
Search Engine Optimization (SEO) adalah langkah memodifikasi
Cara mengubah login screen pada Windows 7
Blogger 2012 - Kali ini saya pingin
Memecah artikel posting menjadi beberapa halaman dengan GT Tabs
Jika Anda mempunyai artikel posting yang panjang,