NOTE

Parallax Stacks has been replaced with the Parallax Flight Stack. The new stack is more compatible with the iOS and mobile devices and also includes some cool new features. If you own Parallax Stacks you can get Parallax Flight for free by using the purchase order look up page. Once you find your order that includes Parallax Stacks, re-download the stack to receive Parallax Flight.

How To Setup Parallax Stacks

Step 1: Create a new Stacks page.

Step 2: If you want to create a one page site with the included Theme Wrap Stack, drag and drop the stack into your editor. This will overwrite the theme you have selected. (If you just want to use the standalone stack inside of another theme skip to step 4)

Step 3: You can now adjust some of the settings for the theme. Leave your mouse pointer over a setting to get a description of what it does.

Step 4: Drag and drop the Parallax Stack into the Theme Wrap Stack or into the editor if you are not using the Theme Wrap Stack.

Step 5: Add any content or other stacks into the Parallax Stack section. In the example below I have added a 3 column stack with text in the right column.

Step 6: Select the Parallax Stack to begin adding your background images. In my example I have added some images that are included with the stack in the folder labeled “demo_images”.

Step 7: Drag and drop your images into the Background and Foreground sections (Foreground images need to be PNG files with transparent parts, the Foreground image is optional). You can adjust the scroll speed of each image. In my example I have set the background to 30% of the website scroll speed and the foreground to 70% of the website scroll speed. If you are creating a landscape, you want the objects that are supposed to appear farther away to scroll slower that things that are closer. Typically, the scroll speed of any parallax should be lower that 100%. I recommend adding padding to the top and bottom of the Parallax Stack using the “Y Padding” slider. This will increase the view-port of the background images you have added.

You can also use a pattern to create a really cool scrolling background. Find some awesome free ones at subtlepatterns.com. If you are using a pattern click on the pattern checkbox to have the image repeat.

Step 8: If you preview your page at this point you will notice that the parallax is set up but the site does not have enough content for you to scroll. If you can’t scroll then the parallax effect is lost.

So we need to create more Parallax Stack sections to make our page longer. I recommend adding padding to the tops and bottoms of each section you add to help give your page length. In my example I have added 200px padding to the tops and bottoms of each section.

If you are using the Page Wrap stack it is important for you to make sure each new section is inside of a new Parallax Stack. This will allow the theme to locate where to scroll when users click on the navigation buttons.

Parallax Stacks Wrap
> Parallax Stack
>    Content and other Stacks
> Parallax Stack
>    Content and other Stacks
> Parallax Stack
>    Content and other Stacks
> Parallax Stack
>    Content and other Stacks

For sections that you do not want to have a parallax background, use the background option to give it a solid color.

Step 9: After you have added enough sections, you can preview the site and adjust settings until you get your desired look. If you are using the Theme Wrap Stack your navigation items will automatically link to your Parallax Stack sections in order. You can change the titles of each section by selecting them in the editor.