Animasi cursor

animasi ini sudah pernah saya bahas di blogspotku, namun blogspotku itu sudah ngga saya update

Mereka bisa karena mereka berpikir mereka bisa. Virginia Wolf

animasi ini sudah pernah saya bahas di blogspotku, namun blogspotku itu sudah ngga saya update

Last Modif at July 8th, 2011

animasi ini sudah pernah saya bahas di blogspotku, namun blogspotku itu sudah ngga saya update alias terbengkalai!

disini saya akan share lagi tentang cursor animasi ini, hitung-hitung nambah content :)!

okelah, mari-kita mulai!

untuk contohnya ada di http://indam-bontang.blogspot.com, animasi ini bisa ditambahkan di blogspot maupun di wodpress.org, berikut langkah-langkahnya!

untuk versi mudahnya, sobat hanya perlu menambahkan external script ini di atas

</head>

<!-- start cursor animasi -->
<script src="http://sites.google.com/site/indamwhy/file-java-script/cursormerah.js"></script>
<!-- end cursor animasi -->

keteragan!

  • untuk blogspot klik layoust atau tataletak, buka edit html, tambahkan script diatas </head>kemudian simpan!
  • untuk wordpress.org buka appearance trus pilih editor, edit pada header.php kemudian cari </head>, tambahkan eksternal script diatas lalu klik update file!
  • lihat blog.

menambahkan secara manual

cara diatas tidak saya rekomendasikan karena, lokasi file javascript diatas adalah milik saya. so, jika suatu saat saya hapus maka otomatis animasi cursor ini tidak akan berfungsi lagi, nah maka dari itu kita akan bahas secara tuntas!

isi dari file external diatas adalah ini!

var colour="red";//warna cursor
var sparkles=65;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}

untuk pengguna blogspot

  • copy script diatas
  • buka program editor(notepad)
  • paste
  • kemudian save as dengan mana cursor-animasi.js
  • ektensinya harus [dot]js
  • kemudian upload di hosting yang sobat punya, jika tidak punya hosting, sobat bisa menggunakn google site!
  • untuk cara menggunakan goole site sebagai hosting, silakan googling!
  • setelah sobat sudah medapatkan url file js yang diupload tadi!
  • tambahkan diatas head!
  • <script src="url-file-js-yang-sudah-di-buat-dan-di-upload"></script>
  • ganti text yang berwarna merah
  • simpan

untuk pengguna wordpress

  • buka directory/folder theme sobat
  • klik kanan diarea kosong!
  • pilih new -> text document
  • copy dan paste script diatas
  • sava dengan nama cursor-animasi.js(pastikan ekstensi file adalah js, bukan text)
  • buka atau edit header.php
  • cari </head>
  • tambahkan ekternal script berikut diatasnya

<!-- start cursor animasi -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/cursor-animasi.js"></script>
<!-- end cursor animasi -->

  • simpan
  • pastikan nama file yang dibuat tadi harus sama dengan <?phpbloginfo('template_directory'); ?>/cursor-animasi.js
  • yang berwarna merah!

keterangan!

  • untuk melihat hasilnya, activate theme yang talah ditambahkan script cusor tadi!
  • sedangkan untuk manganti warna cursornya, edit script yang dibua tadi lalu cari seperti ini

var colour="red"; // warna cursor

  • ubah value red

mudah dan simple kan!

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

4 thoughts on “Animasi cursor”

  1. Liena Aifen says:

    web nya design nya aneh

  2. Ariko says:

    Nice Share Bro…

    Thanks Berat untuk berbagi Pengetahuan-nya

    Ariko
    kamidarisemua.wordpress.com

  3. Al Bahri says:

    Terima Kasih, atas share-nya sobat :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-