History: Creating parallax scroll page sections

Parallax scrolling has been popular web page eye candy for a few years now, often used on site landing pages, or on one-page websites. This page describes a method to add vertical parallax scrolling to sections of a wiki page in Tiki, using the lulu-parallax jQuery script. The details were worked out as part of the adapting to Tiki of the GPL-licensed WordPress Shapely theme by Colorlib.com.

I don't know how easy it is to set up the scrolling effect in the WordPress version, but I found the page code in the WP Shapely demo to be rather complex for a simple introduction to parallax scrolling, and (maybe it's just me) but I had some trouble getting the effect to work well with the original script. For this reason, I looked around and found the lulu-parallax script to be simpler to install and work with.

Maybe the best way to get a running start with parallax scrolling for Tiki is to download and install (in a Tiki 15 or newer site) the Shapely theme. This theme is demoed here: demo.zukathemes.com/Shapely and available to download here: {{coming soon}.

Full-width backgrounds

To have the sections for these effects the full width of the browser window, first the page they're in needs to be full width. How to do this is described on Liquid-width section in page.

Adding the script

Either get lulu-parallax directly from jQueryscript.net at the above link, or get the Shapely theme, which includes it. As for the process, this may be updated, but in my attempts with the Shapely theme, I found the most reliable solution for the JavaScript was to put all the following code in the Look and Feel admin page's "Custom code just before the body tag" textarea, under the "Customization" tag:

<!-- Lulu Parallax -->
<script src="themes/Shapely/js/lulu-parallax.js"></script>
<script>
$(document).ready(function() {
  luluParallax();
});
/*
 * When a user resizes the browser or changes the orientation of their device
 * https://css-tricks.com/snippets/jquery/done-resizing-event/
 */
var resizeTimer;
$(window).on('resize', function(e) {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
	luluParallax(); // Fire the plugin again
	// location.reload(true); // Reload the page
  }, 400);
});
</script>

There are other options for adding the script, but this worked for me. Of course, change the path to lulu-parallax.js as needed.

The CSS

Following the examples at the lulu-parallax demo page or the Shapely demo page, there are three components to the scroll section: