book.js

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

You can activate book.js on any element. 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="cover.jpg">
    </div>
</div>

new Book(document.getElementById('book-cover'), {
	front: 'front.jpg',
	back: 'back.jpg',
	spine: 'spine.jpg'
});

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

Options

All options can be added as data attributes instead of passing them in.

Option	Value	Default	Description
front	String	undefined	Src for the front image.
frontAlt	String	undefined	Alt text for the front image.
back	String	undefined	Src for the back image.
backAlt	String	undefined	Alt text for the back image.
spine	String	undefined	Src for the spine image.
spineAlt	String	undefined	Alt 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.