Reveal Elements With CSS3 Animations When Scrolling - jQuery Revealer
File Size: | 41.5 KB |
---|---|
Views Total: | 1301 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.