Flipbook jQuery Plugin

Flipbook is a jQuery plugin for displaying image sequences. View and download the plugin on github. Why use this instead of a gif? Flipbook works with any browser supported image format including png and jpg. Using a sequence of pngs allows for varying opacity which is not supported with gif. The plugin also allows you to tweak the animation without having to re-export the sequence. Flipbook asynchronously loads all the images for a sequence before playing the animation to ensure smooth playback. Flipbook detects if it's running on a mobile platform and uses a different step value to skip frames, which allows the animation to still play smoothly on a mobile processor.

$('img.spinner').flipbook({
    'end': 7,
    'loop': true,
    'fps': 8,
    'mobileStep': 1,
    'images': 'spinner/spinner.%d.png'
});

This animation is defined by it's html attributes. Flipbook will look for html attributes on the element with the same names as the arguments to Flipbook. An html attribute overwrites the Flipbook argument, this can be used to define defaults for a page but then overwrite attributes per element.

//jQuery                
$('img[images]').flipbook({
    'mobileStep': 1
});  

//html
<img images="spinner/spinner.%d.png" 
end="7" loop="true" />

This uses the same jQuery selector as the example above and defines html attributes. It doesn't loop but it has an onclick event that will cause the animation to run again.

//html
<img class="rockstar" images="rockstar/RockStar%2d.jpg" 
start="1" end="56" fps="25" mobileStep="5" 
onclick="javascript:$(this).flipbook();"/>
                
//css
.rockstar{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;   
    cursor:pointer;cursor:hand;             
}

The background gradient of this flipbook is drawn with css. The images are pngs with transparency so they composite nicely onto the background.

//jQuery        
$('img.shark').flipbook({
    'start': 1,
    'end': 12,
    'loop': true,
    'fps': 8,
    'mobileStep': 1,
    'images': 'shark_small/shark.%2d.png'
});

//css
.shark{
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.0, rgb(5,59,117)),
        color-stop(1.0, rgb(72,167,240))
    );
    background: -moz-linear-gradient(
        center bottom,
        rgb(5,59,117) 0%,
        rgb(72,167,240) 100%
    );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Options

'start': 0, //start frame
'end': 100, //end frame, must be greater then start
'step': 1, //number of frames to step over while animating
'mobileStep': 3, //number of frames to step over when on a mobile device
'fps': 15, //frames per second, this will be adjusted correctly for step>1
'loop': false, //loop the animation
//the image path, uses %d to designate where the frame number goes. 
//%#d can be used to specify padding
'images': ''

By InScopeApps {+}