flipbook.js is a jquery plugin which let you play a sequence of images as a small film on the fly.
Licensed under the MIT license.
First of all, prepare all images for each frame of flim which you want to play in your page. And put a div element in your page.
<div id="flipbook"></div>
And initialize flipbook when your page has been loaded.
var urls = ['path/to/image1.jpg', 'path/to/image2.jpg', 'path/to/image3.jpg', .... ]; //all paths of your images $('#flipbook').flipbook({ urls: urls, width: 640, heidht: 348, fps: 30, onLoad: function(){ ... } });
After initialize the html markup will be beload.
<div id="flipbook"> <canvas id="" width="" height=""> <img id="" width="" height="" /> </canvas> </div>
<!DOCTYPE html> <html> <head> <title></title>> </head>> <body> <div id="wrap"> <div id="flipbook"></div> </div> <script> src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/flipbook.js"></script> <script> var urls = ['', '', '', ...]; //all paths of your images. $('#flipbook').flipbook({ urls: urls, width:640, height:368, autoplay: false, backward: false, fps:30, backward:false, repeat:false, //events onPreload: $.noop, onLoad: function(){ var f = this; if(f.isReady){ f.play(); } } }); </script> </body> </html>
Width of the film
Height of the film
An url of image array which represents each frames of the film.
If set to true, the animation will be played immediately when it is ready (all frames have been loaded). Default is false.
If set to true, the animation wiil be played backwrad.
How many frames will be flipped in a seconds. Default is 30.
If set to true, the animation will repeatly play.
Event triggered every frame have been loaded
Event triggered when all frames have been loaded
Event triggered when a frames have been drawed on screen.
Event triggered when all frames have been played.
Start to preload all images.
Start to play an animation. Requires all frames of image has been loaded.
Pause the animation.
Stop the animation. CurrentIndex will be reset.
Set the current index. The status will be changed to 'pause'.
Indicates whether all frames of image has been loaded.
An array of all frames of image and url.
The index of current frame.