@9am/flipr NPM

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