@9am/flipr

A flipping book library. 📖

---

Demo

Features

• Create a flipping book from html content.
• Support horizontal or vertial layout.

Usage

Install

npm install @9am/flipr

HTML

<ol id="content">
    <li>1111111111</li>
    <li>2222222222</li>
    <li>3333333333</li>
    <li>4444444444</li>
</ol>

Javascript

import Flipr from '@9am/flipr';
import '@9am/flipr/style.css';

const flipr = new Flipr({
    /* FliprOptions */
    w: 600,
    h: 400,
    content: document.querySelector('#content'),
    tHint: 'tr',
});

// append dom
document.body.appendChild(flipr.dom);

Documentation

FliprOptions

Name	Type	Default	Description
w	number	required*	book width
h	number	required*	book height
content	HTMLElement	required*	the content element whose children will be used to render book
ph	number	0	book padding horizontal
pv	number	0	book padding vertical
align	'horizontal' | 'vertical'	'horizontal'	book layout
pageNum	number	0	default page num
tSize	number	100	trigger area size
tHint	'tl' | 'tr' | 'bl' | 'br' | ''	''	show hint trigger area before user interaction
tHintInterval	number	1000	hint animation interval in ms

CSS Properties

Name	Type	Default	Description
--flipr-padding	css <padding>	20px	page padding
--flipr-bg	css <background>	white	page background

License

MIT