Get unlimited public & private packages + team-based management with npm Teams.Learn more »

flipbook

0.0.4 • Public • Published

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

Inspired by canvid and stack

Install

npm i flipbook

DownloadsWeekly Downloads

10

Version

0.0.4

License

MIT

Last publish

Collaborators

  • avatar