Viewport Triggered Element Animation Plugin For jQuery - Revealator

Viewport Triggered Element Animation Plugin For jQuery - Revealator
File Size: 44.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.