Parallax scrolling with dof

Four images with different amount of blur, scrolling on top of each other with the same speed but a different amount of movement, gives the illusion of more depth then there actually is, also known as parallax scrolling. Not a hard concept to grasp, but it is pretty neat, and easy, with only a few lines javascript.

The images are not blurred with js or CSS, they are blurred in photoshop. Only the animation is made with javascript. View it in action here.

/**********************
*
* Parallax scrolling
*
**********************/
function moveItem( item , speed, length ) {
  item.fadevar += 1;
  item.style.left = ( ( Math.sin ( item.fadevar / speed ) * length ) - 500 ) + "px";
}
 
document.getElementById( 'item' ).fadevar = 0;
 
setInterval( function(){ moveItem( document.getElementById( 'item' ) , 60, 500 ) }, 20 )
Benjamin Horn
Benjamin Horn
Developer at Bazooka
A Finnish-German full-stack developer who's worked with a multitude of different technologies throughout the years.
Vaasa, Finland