Cara Membuat Cursor Animasi

Posted by Unknown 14 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 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.

14 komentar:

fuad syafii mengatakan...

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

Jefry mengatakan...

bagus juga ya kalau cursornya diganti dengan animasi2 menarik

Unknown mengatakan...

ga mudeng aku . wakowkaok :D

nurul mengatakan...

pening aku :(

kreativitas mengatakan...

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

Unknown mengatakan...

Banyak sekali embel-embelnya :p

Unknown mengatakan...

Masih gak ngerti kaak

Unknown mengatakan...

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

EghyR01 mengatakan...

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

Unknown mengatakan...

gk mudeng aq,...

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

Bima A. mengatakan...

kunjungan balik nya gan
www.bmaster23.blogspot.com

Anonim mengatakan...

Blogwalking sob, salam kenal ya :)

Mas_Eko mengatakan...

bang.. cara buat.e gimana?? :o

Teknoku mengatakan...

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!

Free Backlink

================================
Free Automatic Link Demo Shaka InghetS
Backlink Gratis (Free Backlink) Google PageRank Checker Powered by  MyPagerank.Net
Template by Berita Update - Trik SEO Terbaru. Original design by Bamz | Copyright of Demo Shaka InghetS.