jQuery Parallax

jQuery Parallax

With Custom Backgrounds for WordPress version 3.0 we have introduced option to add multiple images to a background with jQuery Parallax. This can be used to create some really cool looking backgrounds.

The jQuery Parallax turns the selected element into a ‘window’, or a viewport and all its children (other images) into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and depending on the dimensions and options for layer initialization, they will move by different amounts.

In this example we have uploaded 4 different images. The image below shows the location of the 4 images in the banner. Try and move your mouse over the header on this page then you will experience the jQuery Parallax effect for your self.

Banner/Background created with jQuery Parallax

 

The background that is at showing first is the bottom layer. You can change the order of the layers by dragging each box to the desired order. The Background Selector for each image is the same as its multiple images applied to the same location.

jQuery Parallax images

You can adjust the layer WIDTH and layer HEIGHT of each image (this is NOT the size of the image, but the layer) and you can adjust the TOP and LEFT starting point. This will help you setup the Parallax background animation exactly how you would like it.

jQuery Parallax Setting the layer height and width