jQuery Plugin To Animate A Sequence Of Images On Scroll - Reanimator

Reanimator is a lightweight and easy-to-use jQuery plugin that has the ability to animate a sequence of images on page scroll and/or with hover/click events.

How to use it:

1. Include the jQuery Reanimator plugin's CSS file in the header of the html file.

<link href="jquery-reanimator.css" rel="stylesheet">

2. Add your image sequences into a container element like this:

<div class="reanimator">
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  <img src="images/6.jpg">
  ...
</div>

3. Include jQuery library and the jQuery Reanimator plugin's JavaScript file at the end of the html file.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery-reanimator.js"></script>

4. Active the plugin by calling the function on the 'reanimator' container.

$('div.reanimator').reanimator();

5. Config the image sequence animation with the following settings:

$('div.reanimator').reanimator({

  // debug mode
  "debug": false,

  // extra space above the image's actual position
  "above": 0,

  // extra space below the image's actual position
  "below": 0,

  // enable animation on scroll
  "scroll": true,

  // enable animation on click
  "click": false,

  // enable animation on hover
  "mouse": false
  
});

6. You can also pass the settings by using the data-reanimator-OPTIONNAME directly on the container element.

<div class="reanimator" 
     data-reanimator-above="250" 
     data-reanimator-below="250">
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  <img src="images/6.jpg">
  ...
</div>

---

This awesome jQuery plugin is developed by GreenInfo-Network. For more Advanced Usages, please check the demo page or visit the official website.