JS Plugins JavaScript
On branch current
Latest: ???/cur
Running: 67be789 (v0.0.14)
??? commits behind

Turns a boring book cover into something more interactive. Written in vanilla JavaScript. 100% responsive.


npm install book.js


git clone


Activate book.js on any element using new Book(Element) or $('#book-cover').book() with jQuery. The contents of the element will be replaced. You should pass at least the front, back, and spine image URLs.

<div id="book-cover">
    <div class="book-cover-overlay">
        <img class="book-cover-front-image" src="">
<button id="book-flip" class="flip-button" type="button">Flip</button>
var book = new Book(document.getElementById('book-cover'), {
    front: '',
    back: '',
    spine: ''

document.getElementById('book-flip').onclick = function () {

/* Or if you prefer jQuery:
    front: 'front.jpg',
    back: 'back.jpg',
    spine: 'spine.jpg'


Pass in options like this:

new Book(element, {
  optionName: optionValue

Or put them on the element as data attributes:

frontStringundefinedSrc for the front image.
frontAltStringundefinedAlt text for the front image.
backStringundefinedSrc for the back image.
backAltStringundefinedAlt text for the back image.
spineStringundefinedSrc for the spine image.
spineAltStringundefinedAlt text for the spine image.


If the needed CSS3 transforms aren't supported, the flip animation will degrade into simply swapping the front and back covers and the hover animation will be disabled, so book.js should be safe to use with any browser.