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.
Parallax from Joe Workman is just out of beta and proves that a parallax stack can work 'out of the box'.
The thing that I like most about Parallax is the fact that it is so easy to set up. When you drop the stack onto your page, you will see an empty image frame in which you may position either a local or a warehoused image.
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.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.