jquery flip book

A flip book (or flick book) is a book with a series of pictures that vary gradually from one page to the next, so that when the pages are turned rapidly, the pictures appear to animate by simulating motion or some other change.¹

Hello there, I’m James. I’ve made a very simple jQuery plugin to help me render flip book style animations or to create a ‘boiling’ effect.

If you have several elements (eg images) of the same size within a single parent element, this plugin will automatically display them one by one, with configurable options for speed, starting point, direction and more.

Please have a look below for instructions on how to use my plugin - and if you have some ideas for making it better, please visit the project on GitHub!

_{1. "Flip book", Wikipedia. Retrieved 29/04/2014.}

First things first

This plugin requires jQuery. Grab the latest version or have it served to you by something like Google Hosted Libraries.

Download my plugin here or grab what you need from GitHub - there’s a compressed version of the script for live sites, and a full version if you want to dig a bit deeper and have a look at my code.

All good so far? Include both jQuery and my script in your footer, making sure you've specified the correct paths based on particular situation:

Setting things in motion

This plugin is designed for a series of same-sized elements (not limited to - but most likely - images) within a container.

Let’s make a ‘book’ with ‘pages’ - no CSS needed for now. By default the plugin does expect images so let’s stick with those:

Then, simply achieve the flip book effect with the following function:

$(’#book’).flipbook();

Tinkering & tailoring

You can customise the behaviour of the plugin with a handful of options, following the format below:

$(’#book’).flipbook({
    speed: 100,
    autoplay: true,
    startFrom: 1
});

Here’s the complete list of things you can mess about with:

speed number, default: 100

How many milliseconds each page (frame) is visible for.

direction string, default: "forwards"

Accepts either "forwards" or "backwards" and determines which direction the plugin will cycle through the pages.

startFrom number, default: 1

What number page your flip book should start from. If you specify a number larger than the total available pages, it'll revert to the default value (1).

autoplay boolean, default: true

Determines whether your flip book should start animating immediately. If set to "false", you'll need to create a custom control via the 'play' option (detailed later in this section) in order to trigger the animation.

wait boolean, default: true

Determines whether your flip book should wait until images are loaded before starting.

page selector, default: "img"

What element the plugin will recognise as the pages of your flipbook.

inline boolean, default: true

If you don't want the plugin to apply inline CSS to your elements then set this to false. You might just prefer to keep the CSS out of your JS - but it will also mean the CSS is not affected by any unforeseen delays there might be with the loading & initialisation of the plugin. You'll then need to make sure the parent element that contains your pages has position: relative; and for best results also overflow: hidden. Your pages should have position: absolute; display: none. Finally it'd be best to set the width & height of the parent element manually as well, so that it matches the size of your pages/images.

play selector, no default

What element the plugin will recognise as a 'play' button. Clicking on this element will set in motion a non-autoplaying flip book, or resume a paused flip book.

pause selector, no default

What element the plugin will recognise as a 'pause' button. Clicking on this element will pause the flip book on its current page.

rewind selector, no default

What element the plugin will recognise as a 'rewind' button. Clicking on this element will reverse the direction the flip book is playing in.

rewindPlay boolean, default: false

By default, the rewind button will simply reverse the direction the flip book is being instructed to play in. If you do this whilst a flip book is animated, you'll see the effects of this reversal. If you do this whilst a flip book is not animated, you won't see the effects of the reversal until you press 'play' again. However, setting rewindPlay to true will mean the rewind button acts as a sort of 'backwards play' button, both reversing the direction and setting the flip book in motion again if it's not currently animated.

This is the end

I haven't released a jQuery plugin before & I needed this really quick function for something I'm working on - so for fun I thought I'd code something fit for purpose from scratch & prepare it for public consumption. Thanks for taking a look!

In future I'd like to implement some public methods so that it'd possible to fire instructions at individual flip books without relying on custom clickable elements. It's a bit hacky but you can basically do this already by making sure you've set any of the 'play', 'stop' & 'rewind' options, including your specified elements in your document and using jQuery's trigger() to fake clicks on them.

I'd also like to explore the option to have a 'sprite mode' that allows you to provide a single sprite rather than a series of images.

This plugin potentially encourages the inclusion of lots of images in your code. Although I've already provided an option that asks a flip book to wait for the images to load before playing, you could also try imagesLoaded to extend things further, and I also recommend ImageOptim & ImageAlpha for keeping your file sizes down.

Find out more about me at www.jshedden.com.

jQuery flip book