Scroll animate frames is a jQuery plugin, that animates frames on scroll, interactively playing an image sequence. The animation's frames are displayed accordingly as the user scrolls down or up, playing the animation forwards or backwards. The plugin is suitable to make image sequences interactive exported from videos, or rendered in 3D software like Blender. 🎥
Scroll animate frames currently plays in full screen, where the HTML snippet is inserted into the DOM. The plugin scales images as large as possible within the full screen container without cropping or stretching them.
The plugin detects images' loading by default, and only starts playing if all images are loaded. Scroll animate frames supports all devices and screen sizes, and also handles window resize events.
0.1.2
Install jQuery with one of the several options.
Include Scroll animate frames’ CSS and JS. Place the <link>
tag in the <head>
for CSS, and the <script>
tag for JavaScript after jQuery, and before the closing </body>
.
<link href="css/scroll-animate-frames.css" rel="stylesheet">
<script src="js/jquery.scroll-animate-frames"></script>
Insert this HTML snippet into the DOM, where you want the animation to play in full screen on scroll.
<div class="saf">
<div class="saf-helper-placeholder"></div>
<div class="saf-helper-imgs">
<img alt="" class="saf-img" src="img/saf-img-1.jpg"/>
</div>
</div>
The images' filenames must match the HTML snippet's formula – starting with the filename base like saf-img
, followed by a dash -
and ending with the images' frame number like 1
with no extra decimal places, but filename bases can be custom (see below). Custom image filename bases must match within the HTML and the JavaScript.
Nesting the player in a non-full-width container is currently not not supported.
Initialize your player.
$('.saf').saf();
Name | Default | Description |
---|---|---|
fileName |
saf-img |
Sets the filename base, without the counter |
imgCount |
25 |
Sets the frame range to be played |
speed |
2 |
Sets the play speed or scroll sensitivity, from 1 to 3 , the 1 being the slowest. |
Example usage:
$('.saf').saf({
fileName: 'custom-img', // Sets custom filename base
imgCount: 100, // Sets custom frame range to be played
speed: 3 // Sets maximum play speed
});
- Add example interactive
- Add generate image alt tags
- Add automatic custom filename support
- Add option for custom player background
- Add option for custom player sizing
- Add style prefixes for better compatibility
Pull requests are not yet welcome. For support requests, please open an issue first to discuss what you would like to change.