|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.