book.js v0.0.14

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.

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.