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 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.
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