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

To create a new PageFlip object: ```js 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

settings: object

To draw on a canvas, use

loadFromImages

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

loadFromHtml

js
pageFlip.loadFromHtml(items);

html

    

        Page Cover
    
    

        Page one
    
    

        Page two
    
    

        Page three
    
    

        Page four
    
    

        Last page
    

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

Use

attribute to specify page type (

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)

Events

To listen events use the method

on

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

flip: number

changeOrientation: ("portrait", "landscape")

changeState: ("user_fold", "fold_corner", "flipping", "read")

init: ({page: number, mode: 'portrait', 'landscape'})

on

update: ({page: number, mode: 'portrait', 'landscape'})

Event object has two fields:

data: number | string

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