Membuat Efek Teks Berjalan - Marquee Effect dg css3 Animation

Selama ini untuk membuat teks berjalan kita selalu menggunakan javascript atau efek marquee, kali ini kita akan membuat dengan cara berbeda. CSS3 animation yang kini telah didukung secara merata oleh hampir semua browser akan kita manfaatkan untuk membuat sebuah efek teks berjalan yang cukup menarik. Kode css juga telah dilengkapi dengan css3 transition untuk membentuk hover efek yang lebih menarik ketika cursor diarahkan diatasnya. Agar efek teks berjalan ini juga bisa dimanfaatkan sebagai teks link, maka disertakan juga sebuah fungsi yang bertujuan untuk membuat teks berhenti berjalan saat cursor berada di atas teks. Anda bisa menggunakan kode css ini dalam blog dengan menyimpan melalui "Dasboard - Page Elements - Add a Gadget - HTML/Javascript" atau di atas kode ]]></b:skin> yang dapat dilakukan melalui box Edit Template "Dasboard - Design/Rancangan - Edit HTML". Jika kode css disimpan di atas kode ]]></b:skin> silahkan hilangkan tag pembuka & penutup style-nya (<style type="text/css"> dan </style>).

Kode CSS efek teks berjalan - Marquee Effect

<style type="text/css">
.boxwadahteks{
     padding:5px 10px;
     width:400px; /* rubah ukuran lebar bos jika diperlukan */
     background:#aaa;
     margin:10px auto; /* rubah ukuran margin jika diperlukan */
     border:2px solid #555;
     overflow:hidden;
}
.GRwadahteks{
     float:left;
}
@keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-o-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-ms-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-moz-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
@-webkit-keyframes GRanima_teks{
     from{left:0%;}
     to{left:-100%;}
}
.GRwadahteks .GRmlaku{
     animation:GRanima_teks 20s infinite linear; /* semakin besar waktunya maka semakin lambat */
     -o-animation:GRanima_teks 20s infinite linear; /* ganti semua dengan nilai yg sama (angka 20s) */
     -ms-animation:GRanima_teks 20s infinite linear; /* o untuk opera, ms = IE, moz = Mozilla, webkit = Safari, Chrome */
     -moz-animation:GRanima_teks 20s infinite linear;
     -webkit-animation:GRanima_teks 20s infinite linear;
     font-size:24px; /* ukran teks */
     font-family:arial; /* jenis font */
     margin-left:100px;   
     font-weight:normal; /* bisa ganti normal dengan bold untuk teks tebal  */
     text-shadow:1px 1px 1px #000;
     color:red; /* rubah warna teks jika dikehendaki */
     white-space:nowrap;
     display:inline-block;
     position:relative;
}
.GRwadahteks .GRmlaku span{
     color:magenta; /* warna teks ke dua - ganti warna jika diperlukan */
     font-style:italic; /* style huruf miring */
     font-family:Serif; /* jenis font */
}
.GRwadahteks .GRmlaku a{
     color:lime;
     text-decoration:none;
}
.GRwadahteks .GRmlaku,.GRwadahteks .GRmlaku span,.GRwadahteks .GRmlaku a{
     transition:color 1s;
     -o-transition:color 1s;
     -ms-transition:color 1s;
     -moz-transition:color 1s;
     -webkit-transition:color 1s;
}
.GRwadahteks:hover .GRmlaku,.GRwadahteks:hover .GRmlaku span{
      color:#fff; /* warna hover teks - saat disorot cursor */
}
.GRwadahteks:hover .GRmlaku a{
      color:blue; /* warna hover link - saat disorot cursor */
}
.GRwadahteks:hover .GRmlaku{
     animation-play-state:paused;
     -o-animation-play-state:paused;
     -ms-animation-play-state:paused;
     -moz-animation-play-state:paused;
     -webkit-animation-play-state:paused;
}
</style>

Gunakan xHTML seperti berikut untuk menuliskan teks yang akan di tampilkan.

xHTML efek teks berjalan - Marquee Effect:

<div class="boxwadahteks">
<div class="GRwadahteks">
<div class="GRmlaku">Silahkan tuliskan di sini teks yang ingin anda tampilkan sebagai <a href="http://gubhugreyot.blogspot.com" target="_blank" title="Klik untuk dapat lebih banyak tutorial!">teks berjalan</a>. <span>Pada bagian ini teks akan berbentuk miring dengan warna dan jenis font berbeda.</span></div>
</div>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » SENEN Legi, Juli, 02, 2012

» Happy Blogging - gubhugreyot «