SiteApex Template Design for Simple Parallax Pages

Parallax design for SiteApex is not particularly difficult, but the designer needs to keep a few things in mind in order to be time efficient and avoid browser issues. This document will discuss how to plan for parallax in the page template before covering coding requirements and finally covering some of the potential issues that can occur. This document assumes that the reader is familiar with SiteApex, template design, and the basics of what parallax actually is.

Template Requirements - General

Parallax design usually requires “animated” elements to move independently of surrounding elements, which means the animated elements cannot be used to position other elements. Generally, each section of a template pushes the next down, but for parallax to work we need to leave a hole (or holes) in the design, such that the layout does not change in any way when the animated elements are added or removed.
One suggested method for leaving appropriate space is to use excessive margins to push following elements out of the way.
Note that z-index values are critical to the success of parallax design that involves moving elements… the animated elements need to be on separate z-index levels than the rest of the page.

Template Requirements – HTML, CSS, and skrollr Javascript Code

Using standard SiteApex template design, the outer wrapper needs to have a “skrollr-body” identifier attached to it for the javascript library to work correctly. This means that existing “outer_wrapper” styles need to be inline or applied via a class.
     <div class="outer_wrapper" id="skrollr-body">
Page elements that are not animated need to be styled at the same z-index level, and with appropriate positioning and margins to leave space for any animated elements. Note that margins need to be a percentage of the width
for dynamic resizing (and responsiveness). For example:
     .nonAnimatedAfterAnimated { z-index:100; margin:35% 0 0 0; }
Animated elements need to have attributes that identify the type of, and scale of animation. The javascript library looks for the attributes and uses them to make the parallax effect work. The data attributes are where the parallax effects are controlled, and generally come in pairs for simple effects. The number that makes up part of the data identifier indicates how far down the page must be scrolled before that attribute becomes active. The quoted portion of the attribute can contain any CSS styles, that become active when the attribute requirements are met. When scrolling, the parallax effect starts with one data attribute and gradually transforms to the next. When the requirements for the final data attribute are met, the parallax effects end.
The following example takes an element and scrolls it much slower than normal, starting at a 0 pixel offset before the page is scrolled, and ending at a 250 pixel offset after the browser has scrolled 900 pixels for the rest of the page. The element also smoothly becomes 20% translucent during the transition.  Additional parallax effects are possible, limited only by CSS elements.
     <div class="para1" data-0="top:0px; opacity:1.0;" data-900="top:250px; opacity:0.8;">
Finally, the appropriate javascript files need to be included and skrollr  initialized:

     <script type="text/javascript" src="./javascript/jquery.js"></script>
     <script type="text/javascript" src="./javascript/skrollr.min.js"></script>
     <script type="text/javascript">var s=skrollr.init({forceHeight: false});</script>

Potential Issues

There are several possible problems that can occur because of z-index issues or neglecting to leave empty space in the design. It is imperative to synchronize z-index values for the non-animated elements on the page, to prevent unwanted overlapping. Empty space must be left, or the page will collapse and the animated element(s) will not be seen (or not seen correctly). In responsive design, it makes sense to use margins to space elements correctly for the animated elements.
There are several reasons why excessive space occurs below the footer of the page, and they can be very difficult to solve. Strange positioning code is a possibility, as the browser can be confused by CSS positioning into leaving room for elements that do not need the space. Another possibility is the skrollr data elements, when used on a shorter page… if the javascript expects to scroll 2000 pixels on a 1000 pixel high page, there is going to be some layout issues created. In practice, this means we should avoid applying parallax effects at the bottom of a page when possible.
Javascript include issues will likely be related to pathing errors or missing includes. The skrollr library is available on all SiteApex accounts.