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

Scroll-triggered Reveal Animations With jQuery And Animate.css - Scrolla
File Size: 15.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Scrolla is an ultra-light (1kb) jQuery plugin which reveals DOM elements in 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
});

Change log:

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.