Cara Membuat Cursor Animasi

Posted by Arif Rahman 12 komentar
Cara Membuat Cursor Animasi
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 Arif Rahman
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.

12 komentar:

fuad_poenya mengatakan...

thankkk yaaaa
http://vuadcreativedesign.blogspot.com/

Jefry mengatakan...

bagus juga ya kalau cursornya diganti dengan animasi2 menarik

Syahrul Hidayatullah mengatakan...

ga mudeng aku . wakowkaok :D

Nurul Gusmiranda mengatakan...

pening aku :(

kreativitas mengatakan...

Thanks banget ka informasinya,,,,,,,hehe sangat bermanfaat
www.cahrielsandiawan.blogspot.com

Astrid Claudya mengatakan...

Banyak sekali embel-embelnya :p

fista utami mengatakan...

Masih gak ngerti kaak

akbar fauzi mengatakan...

Tanks yah.. Guys! infonya bagus nih.. kursor blog saya bertaburan bintang

EghyR01 mengatakan...

waaahhh kereeennn ..
Terima kasih sobat udah mau membagi ilmunya ..

imed maya mengatakan...

gk mudeng aq,...

kunjungi blog ane ya,..
http://imedtour.blogspot.com/

Bmaster Aditama mengatakan...

kunjungan balik nya gan
www.bmaster23.blogspot.com

inblogspot.com mengatakan...

Blogwalking sob, salam kenal ya :)

Poskan 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!

Free Backlink

================================
Free Automatic Link Demo Shaka InghetS
Backlink Gratis (Free Backlink) Google PageRank Checker Powered by  MyPagerank.Net

Google+ Followers

Template by Berita Update - Trik SEO Terbaru. Original design by Bamz | Copyright of Demo Shaka InghetS.