Reveal Elements With CSS3 Animations When Scrolling - jQuery Revealer

The jQuery Revealer plugin uses Animate.css to animate DOM elements within the document when they become visible on scroll.

How it works:

The plugin detects when elements are scrolled into the viewport and add classes so you can animate with CSS3 animations.

How to use it:

1. Install & download the jQuery Revealer plugin via NPM.

# NPM
$ npm install jquery-revealer --save

2. Import the plugin into the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="dist/jquery.revealer.min.js"></script>

3. Call the function on the target element.

$('#el').revealer();

4. Customize the animation, duration, delay, offset, and iteration with the following data attributes:

<div id="el" 
     data-animate="swing" 
     data-duration="1.0s" 
     data-delay="0.1s" 
     data-offset="100"
     data-iteration="1">
     Element To Animate
</div>

5. To enable the scroll animation on mobile devices, set the mobile parameter to True.

$('#el').revealer({
  mobile: true
});

---

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