Results 1 to 10 of 23

Thread: Parallax Effect in NOF2015

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Default Parallax Effect in NOF2015

    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:

    To get started you'll need to download and save this Javascript file:

    You can follow the steps outlined below on this brief video:

    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: (you must have NOF2015 AU1)
    The images in the Template are from and are available under the Creative Commons Zero license

    We'll make this into a proper tutorial to put on the Wiki soon. Let me know what you think.
    Last edited by Steve Raubenstine; 04-13-2015 at 02:18 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts