Scroll-triggered Reveal Animations With jQuery And Animate.css - Scrolla

Scrolla is an ultra-light (1kb) jQuery plugin which reveals DOM elements in the viewport with Animate.css based CSS animations when scrolling down/up the webpage.

The goal of the plugin is to add certain CSS classes to specific DOM elements when they're scrolled into view. Supports both desktop and mobile devices.

How to use it:

1. Load the necessary Animate.css file in the document's header section.

<link rel="stylesheet" href="animate.min.css">

2. Add the class 'animate' to the DOM element and specify the offset, iteration, animation type, duration and delay using data attributes as follows:

<div class="animate" data-animate="bounceIn" data-offset="50" data-duration="1.0s" data-delay="0.1s"></div>
<div class="animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.2s"></div>
<div class="animate" data-animate="bounceIn" data-duration="1.0s" data-delay="0.3s"></div>
<h1 class="animate" data-animate="rubberBand" data-duration="1.0s" data-delay="0.1s" data-iteration="3">Scrolla</h1>

3. Load jQuery library and the scrolla.jquery.min.js script at the end of the html document so the pages load faster.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="dist/scrolla.jquery.min.js"></script>

4. Invoke the plugin with default options. Done.

$('.animate').scrolla();

5. Enable the reveal animation on mobile devices.

$('.animate').scrolla({
  mobile: true
});

6. Only trigger once.

$('.animate').scrolla({
  once: true
});

7. Determine the Animate.css version you'd like to use. Default: 4.

$('.animate').scrolla({
  animateCssVersion: 3
});

Changelog:

2020-09-02

• Supports animate.css v4.0+

2017-04-27

• method bind

2016-11-04

• add 'data-iteration'

2016-10-24

• add data-offset

---

This awesome jQuery plugin is developed by maximzhurkin. For more Advanced Usages, please check the demo page or visit the official website.