book.js

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.

Installation

npm install book.js

or

git clone https://github.com/0x0049/book.js

Usage

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="https://via.placeholder.com/250x400">
    </div>
</div>
<button id="book-flip" class="flip-button" type="button">Flip</button>
var book = new Book(document.getElementById('book-cover'), {
    front: 'https://via.placeholder.com/250x400',
    back: 'https://via.placeholder.com/250x400',
    spine: 'https://via.placeholder.com/50x400'
});

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

/* Or if you prefer jQuery:
$('#book-cover').book({
    front: 'front.jpg',
    back: 'back.jpg',
    spine: 'spine.jpg'
});
*/

Options

Pass in options like this:

new Book(element, {
  optionName: optionValue
});

Or put them on the element as data attributes:

data-optionName="optionValue"
OptionTypeDefaultDescription
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.

Compatibility

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.