StPageFlip - Simple library for creating realistic page turning effects

St Page Flip

Powerful, simple, and flexible JS Library for creating realistic and beautiful page turning effect.

- Works with simple images on canvas and complex HTML blocks
- Has simple API and flexible configuration
- Compatible with mobile devices
- Supports landscape and portrait screen mode
- Supports soft and hard page types (only in HTML mode)
- No dependencies

import {PageFlip} from 'page-flip';

const pageFlip = new PageFlip(document.getElementById('book'),
    {
        width: 400,
        height: 600,
        size: "fixed" // or "stretch"
        //...
    }
);

pageFlip.loadFromHTML(document.querySelectorAll('.page'));

View on Github Star

Desktop

BOOK TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna. Aliquam ac nulla rhoncus, accumsan eros sed, viverra enim. Pellentesque non justo vel nibh sollicitudin pharetra suscipit ut ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus mollis nibh, non convallis ex convallis eu. Suspendisse potenti. Aenean vitae pellentesque erat. Integer non tristique quam. Suspendisse rutrum, augue ac sollicitudin mollis, eros velit viverra metus, a venenatis tellus tellus id magna.

THE END

[1 of -]

View demo with source code | View API Docs (TypeDoc generated)

Installation

You can install the latest version using npm:

npm install page-flip

Or download bundle from Github
For React you can use: react-pageflip

Usage

If you've installed the package from npm, you should import PageFlip from page-flip package, or just use <script/> tag:

<script src="{path/to/scripts}/page-flip.browser.js"></script>

To create a new PageFlip object:

import {PageFlip} from 'page-flip';

const pageFlip = new PageFlip(htmlParentElement, settings);

// or if you're using a script tag and page-flip.browser.js:
const pageFlip = new St.PageFlip(htmlParentElement, settings);

htmlParentElement: HTMLElement - root element where the book will be created
settings - a configuration object.

To draw on a canvas, use loadFromImages:

pageFlip.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);

To load page from html elements - use loadFromHtml

pageFlip.loadFromHtml(items);

For example:

<div id="book">
    <div class="my-page" data-density="hard">
        Page Cover
    </div>
    <div class="my-page">
        Page one
    </div>
    <div class="my-page">
        Page two
    </div>
    <div class="my-page">
        Page three
    </div>
    <div class="my-page">
        Page four
    </div>
    <div class="my-page" data-density="hard">
        Last page
    </div>
</div>

const pageFlip = new PageFlip(document.getElementById('book'),
    {
        width: 400, // required parameter - base page width
        height: 600,  // required parameter - base page height
        showCover: true
    }
);

pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));

Use the following data-density="hard" attribute to specify page type (soft | hard) and define flipping animation.

Config

To set configuration define these parameters when creating an object:

width: number - required. Base page width
height: number - required. Base page height
size:("fixed", "stretch") - default: "fixed". Whether the book will be stretched under the parent element or not
minWidth, maxWidth, minHeight, maxHeight: number. You must set threshold values with size: "stretch"
drawShadow: bool - default: true. Draw shadows or not when page flipping
flippingTime: number (milliseconds) - default: 1000. Flipping animation time
usePortrait: bool - default: true. Enable switching to portrait mode
startZIndex: number - default: 0. Initial value to z-index
autoSize: bool - default: true. If this value is true, the parent element will be equal to the size of the book
maxShadowOpacity: number[0..1] - default: 1. Shadow intensity (1: max intensity, 0: hidden shadows)
showCover: boolean - default: false. If this value is true, the first and the last pages will be marked as hard and will be shown in single page mode NEW on 0.3.0
mobileScrollSupport: boolean - default: true. Disable content scrolling when touching a book on mobile devices NEW on 0.3.0

Events

To listen events use the method on:

pageFlip.on('flip', (e) => {
        console.log("Current page: " + e.data);
        // callback code
    }
);

Available events:

flip: number - triggered by page turning
changeOrientation: ("portrait", "landscape") - triggered when page orientation changes
changeState: ("user_fold", "fold_corner", "flipping", "read") - triggered when the state of the book changes

Event object has two fields: data: number | string and object: PageFlip

Methods

Available methods:

Name	Parameters	Return value	Description
`getPageCount`		`number`	Get number of all pages
`getCurrentPageIndex`		`number`	Get the current page number (starts at 0)
`turnToPage`	`pageNum: number`	`void`	Turn to the specified page number (without animation)
`turnToNextPage`		`void`	Turn to the next page (without animation)
`turnToPrevPage`		`void`	Turn to the previous page (without animation)
`flip`	`pageNum: number, corner: 'top' \| 'bottom'`	`void`	Turn to the specified page (with animation) NEW on 0.3.0
`flipNext`	`corner: 'top' \| 'bottom'`	`void`	Turn to the next page (with animation)
`flipPrev`	`corner: 'top' \| 'bottom'`	`void`	Turn to the previous page (with animation)
`loadFromImages`	`images: ['path-to-image'...]`	`void`	Load page from images
`loadFromHtml`	`items: NodeListOf \| HTMLElement[]`	`void`	Load page from html elements
`updateFromHtml`	`items: NodeListOf \| HTMLElement[]`	`void`	Update page from html elements new on 0.4.0
`updateFromImages`	`images: ['path-to-image1.jpg', ...]`	`void`	Update page from images new on 0.4.0
`destroy`		`void`	Destructor. Removes Parent HTML Element and all event handlers new on 0.4.0

Contacts

Oleg,
oleg.litovski9@gmail.com
Github