Need help with StPageFlip?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Nodlik
203 Stars 37 Forks MIT License 97 Commits 15 Opened issues

Description

Simple library for creating realistic page turning effects

Services available

!
?

Need anything else?

Contributors list

# 208,836
bittorr...
React
reader
Markdow...
3 commits

GitHub license npm npm

StPageFlip

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

Features

  • 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

Demo and docs: https://nodlik.github.io/StPageFlip/

For React.JS you can use: https://nodlik.github.io/react-pageflip/

Docs (generated by TypeDoc): https://nodlik.github.io/StPageFlip/docs/index.html

Installation

You can install the latest version using npm:

npm install page-flip

Or download bundle from Github

Usage

If you've installed the package from npm, you should import PageFlip from page-flip package, or just use

 tag:

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: object
- 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:

Page Cover
Page one
Page two
Page three
Page four
Last page
const pageFlip = new PageFlip(document.getElementById('book'), {
    width: 400, // required parameter - base page width
    height: 600, // required parameter - base page height
});

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

Use

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
  • height: number
    - required
  • 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. !This mode uses cloning of html elements (pages)
  • startZIndex: number
    - default:
    0
    Initial value to z-index
  • startPage: number
    - default:
    0
    Page number from which to start viewing
  • 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
  • mobileScrollSupport: boolean
    - default:
    true
    disable content scrolling when touching a book on mobile devices
  • swipeDistance: number
    - default:
    30
    (px) minimum distance to detect swipe (new on 1.1.0)
  • clickEventForward: boolean
    - default:
    true
    forwarding click events to the page children html elements (only for
    a
    and
    button
    tags) (new on 1.1.0)
  • useMouseEvents: boolean
    - default:
    true
    using mouse and touch events to page flipping (new on 1.2.0)
  • disableFlipByClick: boolean
    - default:
    false
    if this value is true, flipping by clicking on the whole book will be locked. Clicking will only work in corners (new on 2.0.3)

Events

To listen events use the method

on
:
pageFlip.on('flip', (e) => {
    // callback code
    alert(e.data); // current page number
});

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
  • init: ({page: number, mode: 'portrait', 'landscape'})
    - triggered when the book is init and the start page is loaded. Listen (
    on
    ) this event before using the "loadFrom..." methods
  • update: ({page: number, mode: 'portrait', 'landscape'})
    - triggered when the book pages are updated (using the "updateFrom..." methods)

Event object has two fields:

data: number | string
and
object: PageFlip

Methods

  • getPageCount: number
    - Get number of all pages
  • getOrientation: 'portrait', 'landscape'
    - Get the current orientation: portrait or landscape
  • getBoundsRect: PageRect
    - Get current book sizes and position
  • getCurrentPageIndex: number
    - Get the current page number (starts at 0)
  • turnToPage(pageNum: number)
    - Turn to the specified page number (without animation)
  • turnToNextPage()
    - Turn to the next page (without animation)
  • turnToPrevPage()
    - Turn to the previous page (without animation)
  • flipNext(corner: 'top' | 'bottom')
    - Turn to the next page (with animation)
  • flipPrev(corner: 'top' | 'bottom')
    - Turn to the previous page (with animation)
  • flip(pageNum: number, corner: 'top' | 'bottom')
    - Turn to the specified page (with animation)
  • loadFromImages(images: ['path-to-image1.jpg', ...])
    - Load page from images
  • loadFromHtml(items: NodeListOf | HTMLElement[])
    - Load page from html elements
  • updateFromHtml(items: NodeListOf | HTMLElement[])
    - Update page from html elements (new on 0.4.0)
  • updateFromImages(images: ['path-to-image1.jpg', ...])
    - Update page from images (new on 0.4.0)
  • destroy()
    - Destructor. Remove a root HTML element and all event handlers (new on 0.4.0)

Contacts

Oleg,

[email protected]

https://github.com/Nodlik/StPageFlip

Buy me a coffee

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.