History: Creating parallax scroll page sections

Source of version: 2 (current)

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 [http://www.jqueryscript.net/animation/Easy-Multilayer-Parallax-Scrolling-Plugin-With-jQuery-lulu-parallax.html|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: [http://demo.zukathemes.com/Shapely|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: {CODE()} <!-- 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> {CODE} 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 HTML and CSS As show by the examples at the lulu-parallax demo page or the Shapely demo page, there are two components to the scroll section that need to be configured carefully: ''div class="parallax-group"'' and ''div class="parallax-container background"''. {CODE()} <div class="parallax-group group-a group-a1"> <div class="parallax-container background with" data-rate=".25" style="background-image: url('themes/Shapely/images/background1.jpg');"></div> <div class="parallax-container foreground against" data-rate=".25"> <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center"> <h1>Shapely - Another WordPress theme for Tiki</h1> <p class="margin-bottom-lg"> Parallax scrolling is built in with this theme for a fashionable front page. </p> <p><a class="btn btn-lg btn-white" href="#">read more</a> <a class="btn btn-lg btn-filled" href="#">download</a></p> </div> </div> </div> {CODE} The key to a good scroll effect is to be mindful of the heights of these two divs. In the following code, and on the Shapely demo page, the CSS has these values: {CODE()} .parallax-group { height: 45vw; } .parallax-group .parallax-container.background { height: 100px; } {CODE} The background height must be greater than the parallax-group height for the scrolling effect to happen. The heights can be adjusted to change the relative size of the background image, the height of the section being scrolled and so on.