Sunday, 06 December 2015 18:27

Waypoint and animate.css

Written by
Rate this item
(1 Vote)

Recently we can find on the Internet many templates which implement cool animations while scrolling. In this article I would like to share the way it can be achieved in Joomla Gantry Framework. In order to make it we need to download two things Animate.css and Waypoints.js

 

Animate.css

Animate css is collection of really useful css classes. After we've downloadedit we have to place it in our gantry template css folder

Next step is to go and download jQuery Waypoints. Place downloaded file into js folder of your Joomla gantry template. Now time to make some codding. Go to features folder and create file addwaypoint.php ( you can name it anyway you want ). We are going to create "gantry feature". Somewhat like below.

We basically create php class which extends GantryFreature. We are checking is this feature is enabled in template control panel and if yes we are adding inline javascript script using gantry addInlineScript() function. Inside this function we are placing jQuery script where we define selector upon which we perform our tasks. First we decreasing opacity of "animated" element, later we are using waypoint() function. Waypoint() make two things sets up opacity to one, means visible and add class to selector. Class is animated ( from animated.css ) and parameters are going to be defined in templateOptions.xml and selected using template control panel. Important part is offset which states how far from top of viewport even will fire up. For this purpose I will show you how it is done for #rt-social, custom layout. Php part of addwaypoint.php related to rt-social looks like below:

You can apply it to any selector. Now we are done with gantry feature, we must edit templateOption.xml. First we need to add button to globally enable waypoints feature:

It is within fields named waypoint. When we save it and efresh our admin view we should be able to see:

We need to enable waypoint and go to another section( part ) of this XML document. Because I work with social section of my website, we need t o scroll down a bit:

Nothing extraordinary. Typical Joomla xml configuration file. We just added new fields with extra option to work with our waypoint feature.

jQuery('#rt-social .rt-container').addClass('animated ".$gantry->get('waypointAnimationSocial-effect')."');

As you can see $gantry->get takes parameters using fileld names. First is fields name: waypointAnimationSocial, second part if name of nested field. In this case we have effect. Now we need to refresh our panel and save selected value.

Not every effect is suitable for your design. Keep in mind accessibility and usability issues. Although it is nice way to spice up your website, use it with care and common sense. I hope you found it helpful. It is my way of doing this and there are other way of codding Joomla and Gantry. Gantry Framework for Joomla gives you really huge amount of flexibility regarding to build in template configuration options

Read 2045 times