To accommodate parallax website designs, we have added to system features that will make creating parallax divisions as simple as possible. The first technique is a pure CSS approach while the second is helped by jQuery.

Technique #1: Pure CSS

A fast, easy way to provide the feel of parallax is to simply add the CSS class 'divParallax' to the element containing the foreground content. For example:

The HTML

<div id="divSection1" class="divParallax">This is the foreground content</div>

The CSS

#divSection1 { background-image:url('/images/section1BG.jpg');padding:25px; }

Technique #2: jQuery Parallax Plug-In

In this approach, you will need to add a jQuery plug-in to your website. Simply copy and paste the following reference into the PRELOAD CODE setting of the CMS HOSTING MANAGER > PRELOAD SCRIPTS area.:

<script src="/lib/common/tools/parallax/parallax.js"></script>

Next, add the following attributes to your HTML element:

data-parallax="scroll" data-image-src="/images/name-of-your-background-image.jpg"

That's it. This method will give you the "slower scroll" instead of the fixed position the first method provides.