jQuery Plugin To Create Image Sequence Animation On Scroll - Sequencer

Sequencer is a super tiny (~1kb minified) jQuery plugin which allows you to create GIF style image sequence animation as you scroll down or up the webpage. 

How to use it:

1. Export your video clip into an image sequence and then place the still-images (0.jpg, 1.jpg, 2.jpg, ... ) into the images folder.

2. Add the initial image to a container like this:

<div id="images">
  <img class="sequencer" src="images/0.jpg">
</div>

3. Include the needed jQuery library and the jQuery sequencer plugin on the webpage.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery-sequencer.min.js"></script>

4. Make the images fixed as you scroll the web page.

img {
  min-height: 100%;
  width: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

5. Initialize the plugin.

$("div#images").sequencer({

  // the amount of images
  count: 128,

  // path to your images
  path: "./images",

  // extension of your images
  ext: "jpg"
  
});

Change log:

2015-08-29

• Added preloading functionality. It now requires a callback that will fire after the images are fetched. The images are also appended to the body, to ensure that the browser caches it and places it in memory for use

---

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