Clicky

Parallax For RapidWeaver
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Parallax For RapidWeaver

Parallax from Joe Workman, Review By Rob Hall, CEO at rjh Web Design Rating: 5 out of 5. Parallax is simple to set up and works right out of the box!

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 stack

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've heard that it isn't any different there. Judge for yourself.

blog comments powered by Disqus
  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.