Cara Membuat Cursor Animasi
14
komentar
Cara Membuat Cursor Animasi - Tentunya Cursor Animasi ini Gubuk Reyot punya gaya. Cursor Animasi ini cocok untuk diterapkan di blog sobat. Pernak-Pernik ini menambah rasa sayang terhadap blog kesayangan kita, hingga kita pun betah berlama-lama melihat cursor cantiknya.
Adapun Cara Membuat Cursor Animasi Keren di blog ini sebagai berikut :
Login ke akun blogger sobat
Pilih Rancangan lalu edit HTML
Beri tanda checklist pada Expand widget template
Letakkan kode dibawah ini, diatas kode ]]></b:skin>
.dot{
position:fixed;
padding:0;
margin:0;
border:0 solid;
border-radius:6px;
box-shadow:0 0 0 #fff;
z-index:10;
}
#dot0{visibility: hidden;}
5. Lalu lakukan langkah berikut untuk menyimpan kode CSS dibawah tepat di bawah kode <body>
<script type='text/javascript'>
//<![CDATA[
function elastic_trail() {
var f = 8; /* atur jumlah cursor image */
var g = "http://www.myspacediesel.com/materials/myspace_glitter_graphics/stars/glitter_star12.gif"; /* cursor image */
var h = 0.01;
var k = 35; /* jarak tiap cursor image */
var l = 10;
var m = 1;
var o = 0;
var p = 50;
var q = 10;
var r = 0.1;
var s = 0.1;
var t = 12; /* ukuran cursor image */
var u = 0.75;
var v = 0; /* http://evawangi.blogspot.com */
var w = 0;
for (var i = f - 1; i > -1; --i) {
with(document) {
write('<div class="dot" id="dot' + i + '">\n');
write('<img src="' + g + '" height="' + t + '" width="' + t + '" alt="">\n');
write("</div>\n")
}
}
/*@cc_on@*/
/*@if(@_jscript_version>=5)if(navigator.appVersion.replace(/^.*MSIE (\d+).*$/,'$1')<=6){var x=function(a,n){var b='scroll'+a,d=document,c='compatMode';return d[c]&&d[c]=='CSS1Compat'?d.documentElement[b]+n+'px':d.body[b]+n+'px'};document.write('<style type="text/css">.dot {position: absolute;}body {background: url(foo) fixed;}<\/style>')};@end@*/
var y = function () {
return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement: document.body
};
var z = document.layers ? "": "px";
elastic_trail.prototype.dot = function (i) {
this.X = v;
this.Y = w;
this.dx = 0;
this.dy = 0;
if (document.layers) {
this.obj = document["dot" + i]
} else {
if (document.all) {
this.obj = document.all["dot" + i].style
} else {
if (document.getElementById) {
this.obj = document.getElementById("dot" + i).style
} else {
return
}
}
}
};
var A = new Array();
for (var i = 0; i < f; i++) {
A[i] = new this.dot(i)
}
for (i = 0; i < f; i++) {
A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
}
var B = this;
setInterval(function () {
B.animate()
},
20);
function MoveHandler(e) {
v = e.pageX - pageXOffset;
w = e.pageY - pageYOffset;
return true
}
function MoveHandlerIE() {
v = window.event.x;
w = window.event.y
}
if (document.addEventListener) {
document.addEventListener("mousemove", MoveHandler, false)
} else {
if (document.attachEvent) {
document.attachEvent("onmousemove", MoveHandlerIE)
} else {
if (document.captureEvents) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = MoveHandler
}
}
}
elastic_trail.prototype.vec = function (X, Y) {
this.X = X;
this.Y = Y
};
elastic_trail.prototype.springForce = function (i, j, a) {
var b = (A[i].X - A[j].X);
var c = (A[i].Y - A[j].Y);
var d = Math.sqrt(b * b + c * c);
if (d > k) {
var e = l * (d - k);
a.X += (b / d) * e;
a.Y += (c / d) * e
}
};
elastic_trail.prototype.animate = function () {
var a = 0;
A[0].X = v;
A[0].Y = w;
a = 1;
for (var i = a; i < f; i++) {
var b = new this.vec(0, 0);
if (i > 0) {
this.springForce(i - 1, i, b)
}
if (i < (f - 1)) {
this.springForce(i + 1, i, b)
}
var c = new this.vec( - A[i].dx * q, -A[i].dy * q);
var d = new this.vec((b.X + c.X) / m + o, (b.Y + c.Y) / m + p);
A[i].dx += (h * d.X);
A[i].dy += (h * d.Y);
if (Math.abs(A[i].dx) < r && Math.abs(A[i].dy) < r && Math.abs(d.X) < s && Math.abs(d.Y) < s) {
A[i].dx = 0;
A[i].dy = 0
}
A[i].X += A[i].dx;
A[i].Y += A[i].dy;
var e, width;
if (window.innerWidth) {
e = window.innerHeight;
width = y().clientWidth && window.innerWidth - y().clientWidth == 17 || window.innerWidth - y().clientWidth == 15 ? y().clientWidth: window.innerWidth
} else {
e = y().clientHeight - Math.ceil(t / 2);
width = y().clientWidth
}
if (A[i].Y >= e - t - 1) {
if (A[i].dy > 0) {
A[i].dy = u * -A[i].dy
}
A[i].Y = e - t - 1
}
if (A[i].X >= width - t) {
if (A[i].dx > 0) {
A[i].dx = u * -A[i].dx
}
A[i].X = width - t - 1
}
if (A[i].X < 0) {
if (A[i].dx < 0) {
A[i].dx = u * -A[i].dx
}
A[i].X = 0
}
A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
}
}
}
new elastic_trail();
//]]>
</script>
Klik Simpan Template.
Sumber
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat Cursor Animasi
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://arsipblogarif.blogspot.com/2012/08/cara-membuat-cursor-animasi.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
14 komentar:
thankkk yaaaa
http://vuadcreativedesign.blogspot.com/
bagus juga ya kalau cursornya diganti dengan animasi2 menarik
ga mudeng aku . wakowkaok :D
pening aku :(
Thanks banget ka informasinya,,,,,,,hehe sangat bermanfaat
www.cahrielsandiawan.blogspot.com
Banyak sekali embel-embelnya :p
Masih gak ngerti kaak
Tanks yah.. Guys! infonya bagus nih.. kursor blog saya bertaburan bintang
waaahhh kereeennn ..
Terima kasih sobat udah mau membagi ilmunya ..
gk mudeng aq,...
kunjungi blog ane ya,..
http://imedtour.blogspot.com/
kunjungan balik nya gan
www.bmaster23.blogspot.com
Blogwalking sob, salam kenal ya :)
bang.. cara buat.e gimana?? :o
nice post. thanks for sharing
Cara Mendapatkan skin di mobile legend
Cara vuat akun ml baru
Posting Komentar
Tulis Komentar Yang Menyejukan Hati saja. Kotak Komentar ini diperuntukan untuk Siapa pun termasuk Pengguna Anonim yang tidak PENGECUT !
Tidak menerima Komentar Yang bermuatan Sara, Politik, Makar, tidak pula Komentar Yang menjurus Iklan.
Terima Kasih sudah sedikit meluangkan Waktunya disini!