Viewport Triggered Element Animation Plugin For jQuery - Revealator

Revealator is a simple, viewport-triggered animation plugin that animates any elements with custom CSS3 effects when they're scrolled into view.

Features:

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

Basic usage:

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.

• revealator-fade
• revealator-rotateleft
• revealator-rotateright 
• revealator-slideleft 
• revealator-sliderightt
• revealator-slideup
• revealator-zoomin
• revealator-zoomout 

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

Change log:

2016-01-30

• Made it possible to set options before including plugin

2016-01-25

• Small fix

2016-01-22

• Added an option (revealator-load attribute) to show effect only on load.

2016-01-21

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