Parallax

Download

Before installing Parallax onto your computer, you must first download it from the NimbleHost website.

After completing a purchase on the NimbleHost website, we will provide two ways for you to download your items:

  • Immediately after the sale is completed, you will be redirected to a special page with a download link for each item you purchased. You can use those download links to download each item to your computer.
  • After the purchase is completed, we will send you an email to the address you specified during payment. That email contains download links where you can download each item to your computer.

Install

  1. Locate the file you downloaded to your computer. It will most likely be in your Downloads file, and will be called "Parallax-v2.0.dmg" or similar.3176
  2. Double-click on that file, and a new Finder window should appear displaying the contents of your download. If a new Finder window does not appear (if you're using Mac OS X Lion it may not automatically display), click on the Finder icon located in the Dock. The Finder window, once you've located it, should look similar to the image shown to the right here.
  3. In that new Finder window you will see two files called "ParallaxBase.stack" and "ParallaxSlide.stack", shown as a yellow stack icons. If the icon is a folder, rather than a yellow stack icon, see this article on the Yourhead Software support site for Stacks.
  4. Double-click on those files, and they will automatically be installed for you.
  5. Restart RapidWeaver.

After following these steps, the next time you start RapidWeaver Parallax will be located in the Stacks library, which is accessible from any Stacks page.

Updating

In Stacks 2, update notifications are displayed with a small red symbol in the lower right corner of the Parallax icon in the Stacks Library. Once that red symbol has appeared, select Parallax, then apply the update by clicking on the small gear icon in the lower right corner of the Stacks Library, and selecting "Install Update".

Please Note: In Stacks 2, updates may take a few minutes to appear. According to Isaiah, the developer for Stacks, this is by design, so that checking for updates doesn't interrupt your workflow. You may need to restart RapidWeaver before the update will show up, and it may take 5-10 minutes before displaying.

Parallax's animation works by moving different pieces of a slide's content in sequence, which makes for an impressive visual effect. To start, open the Stacks Library and drag a "Parallax Base" stack onto your page. Then, drag two or more "Parallax Slide" stacks into the "Parallax Base" stack on the page.

Each Parallax Slide will have three places where you can add content:

  1. The Headline - The default text displayed for you here is "Your Headline Here". You may change this text to whatever you want, and it will be displayed as large, bold text on the page (in a h2 tag, just in case you're curious). 3177
  2. The Description - This text is displayed immediately below the Headline, in a smaller font, and is just like a regular Styled Text field. You can add any kind of formatted text and links to this location.
  3. The Image - When viewing Parallax in RapidWeaver's Edit mode, an image placeholder stack is shown directly below the Description. If you're unfamiliar with the Stacks workflow, you can just drag and drop an image from your computer onto this area. When publishing your site or previewing in RapidWeaver, the image will be moved and displayed to the right of the Headline and Description.

Recommended Tips

Parallax requires a certain structure in order to work as smoothly and error-free as possible. Keep these tips in mind when creating your Parallax content:

  • The Headline and Description will take up about 45-50% of the width of the slider, on the left side. We'd suggest keeping the Headline to as few words as necessary so that it doesn't run more than one line.
  • The Image will take up the remaining space (~40%), on the right side of the slider. As such, don't use overly large images, as this may cause layout problems.
  • Be sure to specify a background image in Customizable Options to take advantage of the "parallax" sliding movement. Parallax will move the background image in the opposite direction of the slide, which is what creates this impressive effect.

Special Formatting Features

Parallax has the ability to display specially formatted links. These links are displayed at the bottom of the slide (below the Description), and complement the Headline, Description, and Image that are part of each slide. The background color, border color, border radius and text shadow for these links can be customized in Parallax's Customizable Options.

The formatting for these links can be activated in RapidWeaver's link creation dialog box, via the Custom Attributes section.

  1. Select the text you would like to turn into a link.
  2. Click on the green add link button in Stacks.
  3. After entering the link destination, click on the Custom Attributes disclosure triangle.
  4. In the Custom Attributes section, click on the round plus button in the lower left.
  5. Type in "class" (minus quotation marks) in the Name field, and "parallax-link" (minus quotation marks) in the Value field
  6. Click "Set Link" and preview in RapidWeaver.

Parallax comes with a number of customizable options. These options are available through the stacks information panel which is displayed on the right side of the RapidWeaver window when viewing a Stacks page in Edit mode. If you do not see the information panel, you can toggle it by clicking on the round white "i" icon button 3178 in the upper right corner of the RapidWeaver window.

Parallax Base Options

  • Slider Height - This controls the height of the Parallax slider. 3179
  • Minimum Width - This controls the minimum amount of width Parallax will take up on the page.
  • Autoplay - When this option is selected, a new option will come into view below it, called "Slide Duration". Parallax will automatically cycle through each slide, displaying them for the amount of time you select in the "Slide Duration" option.
  • Content Layout - This drop-down menu allows you to choose the layout for the slides. The "Standard" layout has the text on the left and image on the right. You can also choose to have the slides display only text, or only images.
  • BG Image - Here you can specify a background image for the Parallax slider, which will get scrolled when switching between slides, creating the fancy "parallax" effect this stack is named after.
  • BG Movement - This is the amount of space the background image will be moved when switching between slides.
  • No Background Image - When selecting this option, no background image will be displayed, and the BG Image and BG Movement options will be hidden.
  • BG Border - This color controls the top and bottom border of the Parallax slider.
  • BG Border Width - This controls the width of the top and bottom border of the Parallax slider.
  • Remove BG Border - When selecting this option, the top and bottom border of the Parallax slider will not be displayed, and the BG Border and BG Border Width options will be hidden.
  • Nav Arrow Pos. - This controls the vertical position of the navigation arrows that appear on either side of the Parallax slider. A lower percentage means the Navigation Arrows will be closer to the top of the slider, a higher percentage means they will be closer to the bottom of the slider.
  • Nav Border - This controls the color of the border surrounding the Navigation Arrows
  • Headline Color - This controls the text color of the Headline
  • Headline Shadow - This controls the text shadow of the Headline
  • Text Color - This controls the text color of the Description displayed below the Headline.
  • Link Color - This controls the color of links shown in the Description.
  • Slide Z-Index - Changing this number will control whether the slides appear above or below other content on the page. This is useful for themes with drop-down navigation, where Parallax may appear above that navigation. Smaller numbers mean Parallax will appear below other content on the page.
  • Special Link BG - This controls the background color of specially formatted links*.
  • Sp. Link Border - This controls the border color of specially formatted links*.
  • Border Width - This controls the width of the border displayed on specially formatted links*.
  • Border Radius - This controls the sharpness of the rounded corners for specially formatted links*.
  • Sp. Link Shadow - This controls the color of the text shadow for specially formatted links*.

Parallax Slide Options

  • Hide this Slide - Use this checkbox to hide a particular slide so that it doesn't appear on the page.

3180

  • Headline Top Position - Controls the vertical position of the Headline.
  • Headline Size - This controls the size of the Headline for each slide. You may need to adjust this value depending on the height of the Parallax slider.
  • Desc. Top Pos. - Controls the vertical position of the Description
  • Image Top Pos. - Controls the vertical position of the Image

*Parallax has the ability to display specially formatted links. These links are displayed at the bottom of the slide, and complement to the Headline, Description, and Image that are part of each slide. For more information, see the Parallax article on Adding & Editing Content.

Parallax uses the HTML5 nav element for the navigation arrows (displayed on either side of the content slider) and dots (displayed along the bottom of the slider). Some RapidWeaver themes also use a nav element (for theme menus), but unlike Parallax, apply styles to the nav element directly, rather than targeting it with a class/id name.

In short, this particular problem is usually caused by the theme itself, not Parallax. As such, this should be fixed by the theme developer.

However, you can add the following css code to the Page Inspector --> Header --> CSS --> Custom CSS field in order to get things working:

.parallax-slide-current { z-index: 1001; }
nav.parallax-dots { top: auto; }
nav.parallax-arrows { top: 46%; z-index: 1001; }

If you would like to change the vertical position of the navigation arrows, just adjust the "top" value in the code above to suit your needs.

Affected Themes

This is a list of themes we are aware of that cause this problem with Parallax. Since this layout problem is caused by the theme, we recommend getting in touch with the theme developer if you are experiencing this issue, to see if they have released an update that fixes it.

  • Mark 1 by NCD Themes
  • Mobi by Elixir Graphics
  • Venture by Michael David Design

Updated - 3/25 The below is now a feature as of version 1.1.0

If you want to 'hide' the 'arrow' navigation buttons in Parallax you just need to add a bit of custom CSS.

.parallax-arrows {
display: none;
}

Add the above code into RapidWeaver's Page Inspector - Header - CSS panel.

Note: All custom CSS added via the Page Inspector has to be added to each individual page where the CSS code is needed.

Updated - 3/25 The below is now a feature as of version 1.1.0

If you want to 'hide' the 'dot' navigation buttons in Parallax you just need to add a bit of custom CSS.

.parallax-dots {
display: none;
}

Add the above code into RapidWeaver's Page Inspector - Header - CSS panel.

Note: All custom CSS added via the Page Inspector has to be added to each individual page where the CSS code is needed.