Designer Guide
Parallax scrolling is a web site trend where the background image moves at a different speed than the foreground content while scrolling. Follow these instructions to add a parallax scrolling effect to your design.
1. Include the parallax.js (This script is for designers only)
2. Add this block of CSS:
.parallax {
position: relative;
background-attachment: fixed;
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
}
3. For each parallax section, add the class "parallax" and include the image as a data-img-src attribute.
<section id="banner" class="parallax" data-image-src="images/winter.jpg"></section>
*If you want a section to fill the height of the screen add "height: 100vh;" to that section.
**Recommend image size: 1920 x 1080 pixels
Developer Guide
1. First, edit the parallax.js file to match your html structure. This example has 4 parallax sections, add/remove as needed.
2. Add the parallax class styles to your css:
.parallax {
position: relative;
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
@media screen and (min-width:768px) {
.parallax {background-attachment: fixed;}
}
2. On the Homepage, in the Page Layout add a section with the id "backgroundImages" right before the closing </template> tag. This section will be visible when logged in and hidden when logged out.
<section id="backgroundImages">
<column />
</section> <!-- /backgroundImages -->
</template>
4. Drag & drop a Feature Portlet. Choose Feature – Divided as the Custom Render Template.
5. Upload each parallax image individually (the first image will be placed in the first parallax section, and so on). Recommend image size: 1920 x 1080 pixels
In the Title section, put Background Image 1, Background Image 2... do this for all the images.
6. Now you will notice labels on your parallax images that match what's in the Feature Portlet. (Again, this is only shown while logged in).