Example of requestAnimationFrame

by mach3ss

HTML

<div class="sample">(/･ω･)/</div>

CSS

.sample {
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

(function(win){
    var timer = null;
    var polyfill = function(callback){
        clearTimeout(timer);
        setTimeout(callback, 1000 / 60);
    };
    win.requestAnimationFrame = win.requestAnimationFrame
    || win.mozRequestAnimationFrame
    || win.webkitRequestAnimationFrame
    || polyfill;
}(window));

(function(){
    var target, $el, step;
    
    target = { left: 0, top: 0 };
    $el = $(".sample");
    step = function(){
        var pos = $el.offset();
        $el.css({
            left: "+=" + (target.left - pos.left) / 5,
            top: "+=" + (target.top - pos.top) / 5
        });
        requestAnimationFrame(step);
    };
    step();
    
    $(document).on("click", function(e){
        target.left = e.clientX;
        target.top = e.clientY;
    });
    
}());