Parallax Effect in NOF2015

[Steve Raubenstine]

Hi everyone. Here's a quick tutorial on how to add a Parallax effect to your websites. This is what we'll make in only a few steps: http://netodevelopment.com/parallax/

To get started you'll need to download and save this Javascript file: http://netodevelopment.com/parallax/...dth-snippet.js

You can follow the steps outlined below on this brief video:http://youtu.be/jhh2pANuqO0

1. Set publishing output to HTML5 Dynamic
2. Add the script to the site from the Layout properties panel in PageView
3. Create and stack several Layout Regions. The width should match the page, and I alternated the height 400px (solid bg), 600px (picture bg) for cadence.
4. Using the Grid Inspector enter the CSS class nof-fullwidth for each Layout Region. (you may have to enable the Page Properties Panel by selecting "Grid Inspector" from the View Menu).
5. Set a background color or image on each Layout Region alternating between the two types.
6. Using the CSS property sheet panel set the background-attachment: fixed and background-position: center of each Layout Region using images.
7. Publish.

The NOF2015 template is available here: http://netodevelopment.com/parallax/parallax.zip (you must have NOF2015 AU1)
The images in the Template are from https://unsplash.com and are available under the Creative Commons Zero license https://unsplash.com/license

We'll make this into a proper tutorial to put on the Wiki soon. Let me know what you think.