Parallax scrolling with dof

23Jun2011

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.

Attached code:

123456789101112131415

/**********************

*

* 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 )