Banyak sekali trick2 nya.
Nah kali ini q mau share lagi bagaimana mempercantik cursor.
Mungkin anda langsung paham dengan maksud saya, ya seperti yang terlihat di halaman saya bayangan cursor mengikuti kemana cursor berpindah.
Mungkin anda tertarik dengan ini?wah bagaimana membuat nya yak?
Mari ikuti langkah2 nya dalam pembuatan bayangan cursor:::>>>
1. Login dulu pastinya
2. Seperti biasa pada dasbor pilih rancangan
3. Selenjutnya pilih edit Html n jangan lupa centang expad widget
4. sekarang cari kode ini:::>>> body{
5. Setelah ketemu tambahkan kode di bawah ini di bawah nya ( body{ )
overflow-x: hidden;
Jadi susunan nya seperti ini:
body{
overflow-x: hidden;
}6. Selanjutnya cari lagi kode <body> atau </body>
Nb: Dalam artian peletakan nya di tengah2
<body>
KODE JS............
</body>
7. Letakin lagi kode di bawah ini di antara kode tadi.
<script type="text/javascript">
//<![CDATA[
/*
Cursor Berbayang by Marcin Wojtowicz [one_spook@hotmail.com]
Featured on JavaScript Kit (http://www.javascriptkit.com/script/script2/cursortrail.shtml)
*/
var trailLength = 20 //Jumlah Bayangan setiap digerakkan
var path = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19_bSv-Mlo4c3CzdvzcCXhJtE8ZKq9jgcwYfhUMMrJdgDnX_EPPnkvG7lPf3-FRh_prkKU3gu14B-K9OqKMdywjPB2p5bo1eVcTn0jiYJdx47wPexXXu-ylZ1MqdoljMg3MVfKmaduxNU/s1600/cursor-Blog+Nano+Yulianto.gif"
var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var i,d = 0
function initTrail() { // prepares the script
images = new Array() // prepare the image array
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image()
images[i].src = path
}
storage = new Array() // prepare the storage for the coordinates
for (i = 0; i < images.length*3; i++) {
storage[i] = 0
}
for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>
')
}
trail()
}
function trail() { // trailing function
for (i = 0; i < images.length; i++) { // for every div/layer
document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinate
document.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinate
d = d+2
}
for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
storage[i] = storage[i-2]
}
d = 0 // reset for future use
var timer = setTimeout("trail()",10) // call recursively
}
function processEvent(e) { // catches and processes the mousemove event
if (window.event) { // for IE
storage[0] = window.event.y+standardbody.scrollTop+10
storage[1] = window.event.x+standardbody.scrollLeft+10
} else {
storage[0] = e.pageY+12
storage[1] = e.pageX+12
}
}
initTrail()
document.onmousemove = processEvent // start capturing
//]]>
</script>
8. Setelah semua terpasang jangan simpan dulu bro, coba pratinjau dahulu.
Setelah terlihat berhasil barulah simpan.
Ok bro sekian dari saya, semoga jelas dan membantu.
Selamat mencoba.
Credit : Javascriptkit
0 comments:
Post a Comment