Using Parallax

A quick step-by-step guide for getting the most out of this new stack.
Stacks Image 569

Download & Install

After purchasing, download the .dmg file to your computer, open it, then double-click the ParallaxBase.stack and ParallaxSlide.stack icons to install.
Stacks Image 573

Add to a Stacks page

After restarting RapidWeaver, open a Stacks page and drag ParallaxBase from the Stacks Library onto your page. Then drag ParallaxSlide into that stack.
Stacks Image 577

Customize Options

In Parallax's options, you can change the number of slides, the height of the slider, the background image, and much more.
Stacks Image 581

Edit Your Slides

Each slide has a Headline, a text area below that, and an image. Customize each portion for each slide, then preview in RapidWeaver.
Stacks Image 585

Eye Popping Animation

Building a great website with real "wow" factor just got a whole lot easier. Parallax is perfect for when you need to catch attention - it's one of those things you can't help but stop and admire.

Using advanced CSS3 technology Parallax creates multi-stage animations that are truly remarkable, moving different elements at different times to create an immersive browsing experience.

Responsive & Mobile

Parallax is based upon the great demo by Mary Lou of Codrops - but the original version wasn't iOS friendly, so we revamped the design to make sure Parallax looks and works great, even when using an iPad or iPhone.

Now you can be sure that not only will your desktop site be jaw-droppingly good, but mobile visitors can enjoy the awesomeness as well.

Requirements

Parallax requires Stacks 2 and RapidWeaver 5.

Stack Options

Screenshot

Online Manual

View

Project File

Download

Purchase Options

Parallax - $11.97   Add to Cart

Official PayPal Seal
Stacks Image 590

Browser Compatibility

Parallax is specifically designed for modern browsers that can take full advantage of HTML5 and CSS3, and has been tested in the following browsers:

Safari 5.1+, Firefox 10+, Chrome 17+, Opera 11+*, & IE 9*/10

IE9 & Opera do not support the advanced CSS transformations Parallax uses, and will instead display a "regular" content slider, minus the multi-staged animation.

Background pattern in the above Parallax example is from Din Pattern.