jQuery Plugin To Create Image Sequence Animation On Scroll - Sequencer
File Size: | 5.89 MB |
---|---|
Views Total: | 14117 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.