Animating an Image on scroll

This tutorial applies to the following templates:

  • Colette
  • Maya
  • Grace
  • Magnolia
  • Harmony
  • Verona
  • Kodaline
  • London
  • Hannah
  • Elvira
  • Valencia
  • Serenity
  • Chelsea
  • Scarlett
  • Trinity
  • Willow
  • Caitlin
  • Nadia
  • Beaumont
  • Ashley
  • Fedora
  • Artisan
  • Creative
  • Revolve
  • Madison
  • Florence
  • Vitality
  • Enterprise
  • Boutique
  • Stockholm
  • Alexis
  • Central
  • Boss
  • Journal
  • Enlighten
  • LifeStyle
  • Habitat
  • Grafik
  • Cashmere
  • Virtuoso

In recent template releases we have added the means to add animation to elements of your design. These animations are automatically triggered by the template when the element to which you have added the animation enters the viewport of your browser. Adding an animation to an element is achieved by adding a class name to that element.

In this tutorial we are going to focus on how to animate an image within an article or custom HTML module. We are going to presume the image you wish to animate is already in your article/custom HTML module.

  1. In your editor hit the 'Toggle Editor' button at the bottom right of your article. This should bring up the HTML source code of your article. Some editors will have a source/HTML button available which you can also use.
  2. Locate the source code for your image. Example:
    <img src="images/sample.jpg" alt="sample" />
  3. Add the class name 'animate' along with your animation class name. Example:
    <img src="images/sample.jpg" alt="sample" class="animate fadeInUp" />
    Note: A list of the animation class names along with a working example is available on the demo of each compatible template (Parameters -> AnimateOnScroll).
  4. Hit 'Save and Close' and refresh the frontend of your site to test your animation

So how does it work? When you scroll down through the page, Javascript keeps an eye on all elements with the 'animate' class name and detects when that element becomes "visible". It then changes the 'animate' class to 'animated' which triggers the CSS3 animation (fadeInUp).

  • Thursday, 22 January 2015

Join Our Newsletter




We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.