Viewport Triggered Element Animation Plugin For jQuery - Revealator
|File Size:||44.9 KB|
|Official Website:||Go to website|
Revealator is a simple, viewport-triggered animation plugin that animates any elements with custom CSS3 effects when they're scrolled into view.
- Detects if an element is in the viewport and adds a class to it
- 8 built-in animations based on CSS3 aniamtions.
- You can add your own effects using CSS3.
- Custom animation duration and delay.
1. Load the stylesheet
fm.revealator.jquery.css in the
head section, and the
fm.revealator.jquery.js at the end of the document.
<link rel="stylesheet" href="fm.revealator.jquery.css"> <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script src="fm.revealator.jquery.js"></script>
2. Specify the type of effect you want to apply to the element when it comes into view.
<div class="revealator-slideup"> Slideup effect </div>
3. Customize the animation duration and delay.
<div class="revealator-slideup revealator-duration10 revealator-delay1"> Slideup effect Duration: 1000ms Delay: 100ms </div>
- Made it possible to set options before including plugin
- Small fix
- Added an option (revealator-load attribute) to show effect only on load.
- Added an option (revealator-once attribute) to only show the effect once, and also changed the style to remove delays when effects go out again.
This awesome jQuery plugin is developed by QODIO. For more Advanced Usages, please check the demo page or visit the official website.