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
- Set publishing output to HTML5 Dynamic
- Add the script to the site from the Layout properties panel in PageView
- 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.
- 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).
- Set a background color or image on each Layout Region alternating between the two types.
- Using the CSS property sheet panel set the background-attachment: fixed and background-position: center of each Layout Region using images.
- 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.