Teks Mengikuti Kursor

Salah satu trik web programmer dalam menjaring pengunjung sebuah website adalah dengan membuat sebuah web tersebut unik, sekarang kita coba membuat sebuah efek dari bahasa pemrograman yang bisa membuat web kita semakin keren tentunya, script ini akan memunculkan sebuah kata, terserah kita mau dikasih kata apa, yang akan mengikuti kursor, jadi layaknya sebuah naga terbang, untuk mengetahui hasilnya, langsung aja copy script dibawah ini dan jalankan dibrowser kamu

<html>

<head>

<title>Teks Mengikuti Kursor</title>

<style type=”text/css”><!–

.spanstyle {

position:absolute;

visibility:visible;

top:-50px;

font-size:14pt;

font-family: Arial, Helvetica, sans-serif;

font-weight:bold;

color: #FF0000;

}

BODY {

width:100%;overflow-x:hidden;overflow-y:scroll;

}

–>

</style>

<script language=”JavaScript1.2″>

<!–

var x,y

var kern=16

var flag=0

// Tuliskan teks yang akan mengikuti mouse,ganti terserah kamu:

var message=”akhario.wordpress.com”

message=message.split(“”)

var xpos=new Array()

for (i=0;i<message.length;i++) {

xpos[i]=-50

}

var ypos=new Array()

for (i=0;i<message.length;i++) {

ypos[i]=-50

}

function handlerMM(e){

x = (e) ? e.pageX : document.body.scrollLeft+event.clientX

y = (e) ? e.pageY : document.body.scrollTop+event.clientY

flag=1

}

function makebanner() {

if (flag==1) {

for (i=message.length-1; i>=1; i–) {

xpos[i]=xpos[i-1]+kern

ypos[i]=ypos[i-1]

}

xpos[0]=x+kern

ypos[0]=y

for (i=0; i<message.length; i++) {

if (document.getElementById) {

var thisspan = document.getElementById(“span”+i).style

} else {

var thisspan = eval((document.layers)?”document.span”+i:”span”+(i)+”.style”)

}

if (thisspan.posLeft) {

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

if (!thisspan.posLeft) {

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

}

}

var timer=setTimeout(“makebanner()”,30)

}

window.onload=makebanner;

//–>

</script>

</head>

<body>

<script language=”JavaScript1.2″>

<!–

for (i=0;i<message.length;i++) {

document.write(“<span id=’span”+i+”‘ class=’spanstyle’>”)

document.write(message[i])

document.write(“</span>”)

}

if (document.layers){

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = handlerMM;

//–>

</script>

</body>

</html>

keren kan………!!!!!!!!!!!!!!!!!

17 thoughts on “Teks Mengikuti Kursor

  1. idiiihh…bingung deh bacanya…
    gamana ni…kok ga ada step na gtu lo..
    orang awam bahasa programmer ya bingung..lah..

  2. mas, perlu di revisi ulang. saya pake wordpress tapi kodenya gak berfungsi. apa saya yang salah kopi???
    atau kodenya kurang tepat??
    saya jadi bingung…

  3. kalo di wordpress ya nggak bisa, soalnya banyak code2 html atau lainnya yang dipath oleh wordpress, coba dech ketik code itu di web kamu sendiri, pake hostingan gratis kan banyak…. coba disitu….. atau kamu juga bisa coba di komputer lokal kamu di localhost, tapi instal dulu web servernya…. misal pake phptriad, xampp, wamp atau instaler instan lainnya….

  4. gimana sih ??
    step-step nya mana ??
    kalau ngasih cara itu dari awal donk .
    biar orang baru di blogger juga ngerti bahasa nya .
    saya sja gak ngedonk blass .

    code itu di copy kemana ?? .

  5. Ha ha ha ha apanya yang keren… step by stepnya mana?? di taruh dimana.. ha ha ha asal posting aja nih wkwkwkwkwkwk sampe nangis saya ketawa baca artikel ini wkwkwkwk

  6. ne sekedar bagi info aja ya, kemarin saya coba script diatas ngak jalan juga, tp udah cari sana sini akhirnyaa gw bisa juga buat tulisan yang mengikuti mouse, triknya ngk rumit kok tinggal copy paste ke tmbahan gadget html, selesai urusannya jadi sobat2 nda perlu edit html yang resiko pusing kepala, nd blognya ancur, coba di http://www.zul-belajar.blogspot.com sebelumnya minta maaf kalau nda jadi, soalnya saya pake kode disitu kok:)

  7. paling gampang nya, copy smua script nya ke notepad atau editor apa aja, trus save terserah pake nama apa ekstension .html, misal test.html, trus buka tu file di browser

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s