Loading...
Home Page
About
Marketplace
Sample page
Wishlist at dev site
Sitemap (Categories)
Tiki Customization
Creating a theme
Converting a Bootstrap theme
Contributing, sharing or selling
Customizing icons
Tips
Template Tricks
CSS Tricks
Feature Examples
Articles
Blogs
Calendar
Forums
FAQs
Trackers
Files
Links Directory
Wiki Pages
Find
History: Creating parallax scroll page sections
View published page
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.
Layout
Stay on this page
Default
Single Container
Classic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
Bootstrap component sets
Included themes
Materia
Ohia
Themes
Making or Updating a Theme for Tiki 27
Updating a Theme for Tiki 26
Tiki_org_family_customizations_CSS
BookStacked
Make an SCSS-Compiled Tiki Theme
...more
Subscribe to Tiki Newsletters!
Delivered fresh to your email inbox!
Don't miss major announcements and other big news!
Site Config
Site upgraded to branch 26x
Wed 21 of Jun, 2023 09:45 GMT-0000
Site upgraded to branch 25x
Sat 12 of Nov, 2022 17:00 GMT-0000
Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT-0000
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT-0000
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT-0000
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT-0000
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT-0000
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT-0000
Upgraded to Tiki 15.0alpha
Tue 08 of Mar, 2016 13:34 GMT-0000