Animasi kursor Bounce Ball (id)

Aku mau share tutorial buat ngasi animasi di kursor. aku kasi bayangan dikit, intinya, setelah masukin script dibawah ini, kursor kamu akan ada "buntutnya" yaitu bola-bola yang bisa memantul. berhubung aku g da blog "korban", aku g bisa ngasi SS contohnya. Buat temen-temen yang uda nyoba, bisa kasi SS di komentar y... buat referensi yang laen.... :P
Ni langkah-langkahnya :
1. Buka blogger.com trus login
2. Masuk dashbord, trus pilih "design" blog yang mau kamu pasang animasi ini.
3. klik "edit HTML"
4. centang "Expand Widget Templates"
5. trus cari tag </body> (biar gampang, tekan ctrl + f)
6. Copy semua script yang di kolom bawah ni tepat "DIATAS" atau "SEBELUM" tag </body>

<script LANGUAGE="JavaScript">
<!--Bounce Ball Start
// image src
var trailsrc = "URL/sumber gambar bolamu";

var nDots = 7;
var Xbpos = 0;
var Ybpos = 0;

// fixed time step, no relation to real time
var DELTAT = .01;
// size of one spring in pixels
var SEGLEN = 10;
// spring constant, stiffness of springs
var SPRINGK = 10;
// all the physics is bogus, just picked stuff to make it look okay
var MASS = 1;
// Positive XGRAVITY pulls right, negative pulls left
// Positive YGRAVITY pulls down, negative up
var XGRAVITY = 0;
var YGRAVITY = 50;
// RESISTANCE determines a slowing force proportional to velocity
var RESISTANCE = 10;
// stopping criterea to prevent endless jittering
// doesn't work when sitting on bottom since floor
// doesn't push back so acceleration always as big
// as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
// BOUNCE is percent of velocity retained when
// bouncing off a wall
var BOUNCE = 0.75;

var ff=(document.getElementById&&!document.all);
var ns=(document.layers);
var ie=(document.all);

// always on for now, could be played with to
// let dots fall to botton, get thrown, etc.
var followmouse = true;
var dots = new Array();

function init()
{
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
 
    // set their positions
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top = dots[i].Y;
    }
 
    setTimeout("startanimate()", 10);
}

function dot(i)
{
this.X  = Xbpos;
this.Y  = Ybpos;
this.dx = 0;
this.dy = 0;

if (ns){
 document.write("<layer id=\"mtrail"+ i +"\" ><img src='"+trailsrc+"' border=\"0\"><\/layer>");
} else if (ie||ff) {
if (i == 0) {
 document.write("<div id=\"mtrail"+ i +"\" style=\"POSITION: absolute;z-index:999;VISIBILITY: hidden;\"><img src='"+trailsrc+"' border=\"0\"><\/div>");
} else {
          document.write("<div id=\"mtrail"+ i +"\" style=\"POSITION: absolute; z-index:999;\"><img src='"+trailsrc+"' border=\"0\"><\/div>");
        }
        }

if (ie)
{
this.obj = eval("mtrail" + i + ".style");
} else if (ff)
{
this.obj = document.getElementById("mtrail" + i).style;
}
else
{
this.obj = eval("document.mtrail" + i);
}
}

function startanimate() {
    setInterval("animate()", 20);
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
    if (ie) {
    Xbpos = window.event.clientX + document.body.scrollLeft;
    Ybpos = window.event.clientY + document.body.scrollTop;
    }
    else {
    Xbpos = e.pageX;
    Ybpos = e.pageY;
    }
}

function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}


function animate() {
    // dots[0] follows the mouse,
    // though no dot is drawn there
    var start = 0;
    if (followmouse) {
        dots[0].X = Xbpos;
        dots[0].Y = Ybpos;
        start = 1;
    }
 
    for (i = start ; i < nDots; i++ ) {
     
        var spring = new vec(0, 0);
        if (i > 0) {
            springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            springForce(i+1, i, spring);
        }
     
        // air resisitance/friction
        var resist = new vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);
     
        // compute new accel, including gravity
        var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
            (spring.Y + resist.Y)/ MASS + YGRAVITY);
     
        // compute new velocity
        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);
     
        // stop dead so it doesn't jitter when nearly still
        if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }
     
        // move to new position
        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;
     
        // get size of window
        var height, width;
        if (!ie) {
            height = window.innerHeight + window.pageYOffset;
            width = window.innerWidth + window.pageXOffset;
        } else {
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }
     
        // bounce off 3 walls (leave ceiling open)
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
     
        // move img to new position
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top =  dots[i].Y;
    }
}

init();
if(ns)window.captureEvents(Event.MOUSEMOVE);
document.onmousemove = MoveHandler;
-->bounce ball end
</script>

7. Jangan lupa mengganti URL/sumber gambar bolamu. 
8. Save, trus coba buka blog kamu.


Ni aku kasi contoh bola sama URL gambar bolanya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWGALoJCoud5nWN7wvRSpjrGLHvXf9OU7lMqrWDATVUK2QLfZC6Eaow5L8BR_m8Wcb2wMcKZXMHms3M_bueKsDdzx0iOUDq0v6cI9QIBmjLzzoAq_L3Um47jyTZ7KojMcHQ8V9YBsP7i3d/s11/Blue%252520Ball.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuWjEVuIBeHMQR6KnByjTJnkqXE-dIVGm59DeYnxnNcwgBas623LkkyMifVsumPs7-KIWi1KtjitjPSxJF92ktcMgEzG2VetreFCVZsigvc6TyY268KqczjUvoEg3S-dw38Ez0Lu6rQEPq/s128/Gray%252520Ball.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1yyKpkAnsxKzucXCCAb_kgHZFAhQ5I-Ie542NTt4XdV3xLtGGjO8QBfOUQ4-wtPA6mIZ_n0s-6EHewqJNQlCPHRXJZnh8oCR3jmND66g2xCGsdUjleLaSZ_wWvqST2ExieGj0ssLQ3ZCq/s128/Green%252520Ball.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZSAbEcvpWDeTPhAr9C_8NDCYWpmRtr4Fm17GcXmn-5sP8tNIdkYApvovk6RDcSeakAukOeoExRy9m9u43gmvF9TQTlkvSofmtdzHPiXbJwiAPWA1eaeMHEK7NE6pqfCzFpT-3qEfAn3Pr/s128/Purple%252520Ball.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjmW019DYpkEjz3xBNDcYyjLHzGfSQslgRzqcVv0O4fjxune0bno_hX_v1Bl8866WbF4_-KU8tRgi2Y1RvMv9wCB546EE0lR5wL4Ixk4inXlGhuKpewUUWxHH-ap6wnU_vjfynHjDwd5VD/s128/Red%252520Ball.gif

Related Articles