There have already been attempts to port parallax functionality to RapidWeaver Stacks pages. All of them began life as nervous affairs which, when you scrolled the page, first did nothing and then sprang to jittering life. Even the demo pages couldn’t be trusted to work properly.
The first option in the stack is the image functionality. The image may be a cover image. This means that any other stacks placed on the page will slide over the background image, when scrolled, while the image itself will also move, albeit at a different speed to further content.
The image may also be set to a specific minimum size and ‘Image Only’. As the page scrolls, the image will also scroll at a different speed, but without any other stacks moving over it.
The third available setting is Image + Content. With this option, it is possible to insert further stacks into the Parallax stack. Parallax can now be set to a minimum height. The content within Parallax will remain within the constraints of the stack. Both contents and image will now scroll up and down at differing speeds.
A standard value of 20px is set for ‘Bleed’ this will enlarge the parallax stack to avoid flicker at the boundaries between the image and adjacent stacks that have a solid filling.
Parallax also has a settings for the speed at which the background image will move in relation to the page scroll, for the z-Index and for the image opacity.
Parallax scrolling has always been problematic on mobile devices. For this reason Parallax displays a static image below 641px screen width. You’ll find a second image container within the HUD. If you feel that the proportions of your image are impractical on a mobile device, you may add a second image to Parallax, which will then be displayed on those devices. The opacity of the second image may also be set in the HUD.
Parallax scrolls smoothly in Safari, Chrome, and Firefox. I’ve not had a chance to test IE yet, but I’m optimistic that it won’t be any different there. Judge for yourself.