Parallax is the effect of a viewpoint moving side to side, where the objects in the distance appear to move more slowly than the objects close to the camera. Let's demonstrate this effect using a jQuery plugin on some clouds.

View Demo Download

First, we start by designing a simple background. Basically a gradient for the sky, a beach with a couple sitting in the sand, near the ocean. Then we add three different layers of transparent clouds, one of them is shaped like a heart.

We put the images in containers within the viewport, which has the sky background. The markup is simplified for the sake of readability, but it's pretty basic.

<div id="parallax">
  <div>
    <img src="images/cloud1.png" alt="" />
  </div>
  <div>
    <img src="images/cloud2.png" alt="" />
  </div>
  <div>
    <img src="images/cloud3.png" alt="" />
  </div>
</div>

The parallax container must have fixed size, hide all the overflow and have a relative position.

#parallax {
    width: 800px;
    height: 596px;
    overflow: hidden;
    position: relative;
}

We use jParallax plugin to make the layers response to the mouse and move by different amounts, in a parallaxy kind of way.

$('#parallax').jparallax({},
    {ytravel: '30px'},
    {ytravel: '20px'},
    {ytravel: '10px'}
);

You should check out the source code and the jParallax website for more details.

Published by Liviu Holhoş on 4 February 2011 18:45