Smooth Parallax Scrolling |


by kirupa | 1 July 2013

For many practical reasons, our UIs are designed to be two dimensional. Once you throw in meaningful content, some navigation, and other doo-dads to make your application usable, adding any more dimensions simply gets in the way and becomes a distraction. Despite the stranglehold two dimensions have on what we create, there are subtle and effective ways of sneaking an extra dimension in here and there.

This is a companion discussion topic for the original entry at



I’m a little new to javascript and parallax. You’re currently making the elements move by id. How would I go about applying the effect to an id’s property? Specifically the background-image?

#viewport {background-image: }


Hi Shane!
While you can use JavaScript to change the values of background-image property on your viewport element, it’s not very performant. The better approach would be to create another div element that will host the background image. You can then animate this element around using the same tips outlined in the tutorial. It would be similar to how the bigYellowSquare element is behind everything and moves.