How to add a parallax scroll effect to your pages?

A web design trend of the moment is parallax scrolling, which involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page. In WYSIWYG Web Builder you can easily add this effect with layers, layout grids or any other object that supports background images.

Step 1
In the style properties of the object set the mode to 'Image' and select an image that covers the full width of the page.
If the image is smaller then it will automatically be stretched, but it may look distorted in the browser if it's too small.
You can view a live demo here:
http://www.wysiwygwebbuilder.com/support/parallaxlayers.html

Download the demo project:
http://www.wysiwygwebbuilder.com/support/parallaxlayers.zip


Related tutorials:
http://www.wysiwygwebbuilder.com/morelayers.html
http://www.wysiwygwebbuilder.com/fullscreen.html
http://www.wysiwygwebbuilder.com/layoutgrid_part1.html
Step 3
Preview or publish the page to see the effect.


For advanced users
The default speed is 0.3. You can change this by adding a Site Variable with the name $PARALLAX_SPEED$
The speed at which the parallax effect runs. 0.0 means the image will appear fixed in place, and 1.0 the image will flow at the same speed as the page content.
Step 2
Set the background size property to 'parallax'.