Parallax scrolling with dof

June 23, 2011

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 )

 

Tags