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