Free Script Slide Untuk Efek Teks Berjalan Pakai JavaScript

JavaScript ini bisa Anda gunakan untuk pengguna Blogger, Wordpress ataupun yang lainya. Anda bisa memunculkan beberapa teks dan juga disertai link anchor ke beberapa tempat secara bergantian.

HTML
<div style="position:relative;left:0px;top:0px">
<span id="highlighter_scroll" style="clip:rect(0px 0px auto 0px);position:absolute;padding:1px 5px;font-size:18px;font-family:Verdana;background-color:yellow;"></span>
</div>

JavaScript
<script type="text/javascript">
/* Do not edit pass this line
JavaScript ini dibuat oleh Sigit Purnomo
Untuk menggunakan widget, kunjungi: http://www.kangsigit.com/
*/
var pesansigit=new Array()
pesansigit[0]='Hay, senang banget kamu datang lagi di <a href="http://www.kangsigit.com">blog kangsigit</a> :D'
pesansigit[1]='Kamu juga bisa dapetin tutorial seputar blogging di <a href="http://www.askedboss.com">Situs ini</a>. GRATIS LOOH!!'
pesansigit[2]='Jangan lupa ya, hehe..'
var pesanDelay=3000 //'hitungan detik' untuk pengaturan jeda sebelum teks selanjutnya muncul
var kecepatan=6 //'6 pixels' untuk kecepatan teks muncul kekanan.
var cutMsg=0
var lebarpesan=0
function buatkonten(){
gulirkanan.style.clip="rect(0px 0px auto 0px)"
gulirkanan.innerHTML=pesansigit[cutMsg]
psnjln()
}
function psnjln(){
var msgwidth=gulirkanan.offsetWidth
if (lebarpesan<msgwidth){
lebarpesan+=kecepatan
gulirkanan.style.clip="rect(0px "+lebarpesan+"px auto 0px)"
clearYa=setTimeout("psnjln()",20)
}
else{
lebarpesan=0
clearTimeout(clearYa)
if (cutMsg==pesansigit.length-1) cutMsg=0
else cutMsg++
setTimeout("buatkonten()",pesanDelay)
}
}
function KangsigitMenulis(){
gulirkanan=document.getElementById? document.getElementById("highlighter_scroll") : document.all.highlighter_scroll
gulirkananParent=gulirkanan.parentNode? gulirkanan.parentNode : gulirkanan.parentElement
if (parseInt(gulirkanan.aturTinggi)>0)
gulirkananParent.style.height=gulirkanan.aturTinggi+'px'
else
setTimeout("gulirkananParent.style.height=gulirkanan.aturTinggi+'px'",100) //delay for Mozilla's sake
buatkonten()
}
if (document.all || document.getElementById)
window.onload=KangsigitMenulis
</script>

Bagaimana ini bekerja?

Pada bagian html, terdapat css style clip:rect(0px 0px auto 0px) dan position:absolute;
CSS ini yang akan memulai teks seperti sedang diketik dan akan muncul teks baru sebagai pengganti.

Trik ini sebenarnya hanya memanfaatkan visibility:hidden akan tetapi tidak terwujud dari css. Ia akan mulai muncul setelah lebar dari objek bergerak lebih lebar, sehingga teks akan terlihat.

Untuk membuktikannya, Anda bisa inspect element atau pakai tombol F12 dan perhatikan bagian teks target.

Bagian kecepatan teks kesamping atau untuk kecepatan teka baru muncul bisa Anda atur pada bagian pesanDelay dan kecepatan.
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini