Živá ukázka

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

CSS

Autoformát
CSS reset
Až na konci

window.onload=function(){
function linearEase(start, end, percent) {
    return start + ((end - start) * percent);
}
function animateTo(settings) {
    var elem = settings.element;
    var ease = settings.ease;
        
    var start = { left: elem.offsetLeft, top: elem.offsetTop };
    
    var lastTime = new Date().getTime();
    var timeLeft = settings.totalTime;
    
    function update() {
        var currentTime = new Date().getTime();
        var elapsed = currentTime - lastTime;
        timeLeft -= elapsed;
        lastTime = currentTime;
        
        var percentDone = 1 - timeLeft/settings.totalTime;
        
        elem.style.top = ease(start.top, settings.top, percentDone) + "px" ;
        elem.style.left = ease(start.left, settings.left, percentDone) + "px" ;
        
        if(timeLeft > 0) {
            setTimeout(update, 33);
        }   
    }
    update();
}
var elem = document.getElementById("animatable");
var elem2 = document.getElementById("animatableB");
 
setTimeout(function() {
    animateTo({
        element: elem, 
        left: 350, 
        top: 10, 
        totalTime: 2000,
        ease: linearEase
    });
    animateTo({
        element: elem2, 
        left: 150, 
        top: 180, 
        totalTime: 5000,
        ease: linearEase
    });
}, 1000);
}

JS

Autoformát
jQuery
Umístění JS