flipbook v0.0.4
flipbook.js
Scroll-based inline flipbook animation for the internet. Checkout the demo.
Installation
npm install flipbook
or
<script src="flipbook.min.js"></script>
Usage
<div id='walk-cycle'></div>
<script>
flipbook({
id: 'walk-cycle',
path: 'frames/walk',
filename: '%1d',
extension: 'jpg',
count: 86,
speed: 0.5
});
</script>Options
id (required) String The id of the element where the flipbook will be inserted.
path (required) String The relative path the directory where the images are.
filename (required) String The pattern of filename (%3d = 3 digits or 001, 002, etc, ex. 'images-%3d').
extension (required) String The type of image file (png or jpg).
count (required) Number Count of images in directory.
speed (optional) Number 0 to 1 How fast the scroll advances the frames (0: slow, 1: fast). Defaults to 0.5.
cover (optional) Boolean If the flipbook should go full window height, and center-crop (like CSS's
background-size: cover). Defaults to false.loaded (optional) Function Callback function when the flipbook has loaded all images and is ready to play through. Defaults to none.
gif (optional) Boolean Autoplay the animation and loop like a gif without scroll interaction.
Helpful bits
Convert a video to image sequence with ffmpeg:
ffmpeg -i input.mp4 -r 12 frames/%d.png
License & Credit
MIT © Russell Goldenberg