RequestAnimationFrame

Animation with easing and

by arcm111

HTML

<div id="ele"></div>

CSS

html, body 
{
    margin: 0;
    padding: 0;
}

#ele
{
	display: block;
    background-image: url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size: 480px;
	background-position: 0px 0px;
    width: 300px;
    height: 300px;
    margin: 40px auto 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-radius: 50%;
    overflow: hidden;
}

JavaScript

var target = {x: 0, y: 0};

window.onload = function()
{
	var element = document.getElementById ("ele");
	var ease_against = true;
    var position = {x: target.x, y: target.y};
	var ease = 0.2;

    function update()
	{
		var x = (ease_against) ? - target.x : target.x;
		var y = (ease_against) ? - target.y : target.y;
        position.x += (x - position.x) * ease;
        position.y += (y - position.y) * ease;
        var style = position.x + "px " + position.y + "px";
        element.style.backgroundPosition = style;
    }

    element.addEventListener ("mousemove", function (event)
	{
        target.x = event.clientX / 5;
        target.y = event.clientY / 5;
        requestAnimationFrame (update);
    }, false);
};