(function(win){
var time, polyfill;
timer = null;
polyfill = function(callback){
clearTimeout(timer);
setTimeout(callback, 1000 / 60);
};
win.requestAnimationFrame = win.requestAnimationFrame
|| win.mozRequestAnimationFrame
|| win.webkitRequestAnimationFrame
|| polyfill;
}(window));
(function($){
$.easing.linear = function(x, t, b, c, d){
if(x !== null){ return x; }
return b + ((c - b) * (t / d));
};
}(jQuery));
(function(){
var nodes, leftFrom, leftTo, scrollStart, scrollEnd, step;
nodes = {
"linear": $(".box.linear"),
"swing": $(".box.swing"),
"easeOutBounce": $(".box.bounce"),
"easeOutBack": $(".box.back")
};
leftFrom = 10;
leftTo = 400;
scrollStart = 500;
scrollEnd = 1000;
step = function(){
var scroll = $(window).scrollTop();
$.each(nodes, function(name, node){
var progress;
if(scroll < scrollStart){
return node.css("left", leftFrom);
}
if(scroll > scrollEnd){
return node.css("left", leftTo);
}
progress = $.easing[name](null, scroll - scrollStart, 0, 1, scrollEnd - scrollStart);
node.css("left",
leftFrom + (leftTo - leftFrom) * progress
);
});
requestAnimationFrame(step);
};
step();
}());
<div class="container">
<div class="box linear">Linear</div>
<div class="box swing">Swing</div>
<div class="box bounce">Bounce</div>
<div class="box back">Back</div>
</div>
body {
height: 2000px;
}
p {
text-align: center;
}
.box {
position: fixed;
font-size: 13px;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
}
.box.linear {
top: 10px;
background-color: #690;
}
.box.swing {
top: 80px;
background-color: #069;
}
.box.bounce {
top: 150px;
background-color: #906;
}
.box.back {
top: 220px;
background-color: #609;
}
External resources loaded into this fiddle: