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
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
You can install the latest version using npm:
npm install page-flip
Or download bundle from Github
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: 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:
<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
}
);
pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));
Use data-density="hard"
attribute to specify page type (soft | hard
) and define flipping animation.
To set configuration define these parameters when creating an object:
width: number
- requiredheight: number
- requiredsize: ("fixed", "stretch")
- default:"fixed"
Whether the book will be stretched under the parent element or notminWidth, maxWidth, minHeight, maxHeight: number
You must set threshold values ββwith size:"stretch"
drawShadow: bool
- default:true
Draw shadows or not when page flippingflippingTime: number
(milliseconds) - default:1000
Flipping animation timeusePortrait: bool
- default:true
Enable switching to portrait mode. !This mode uses cloning of html elements (pages)startZIndex: number
- default:0
Initial value to z-indexstartPage: number
- default:0
Page number from which to start viewingautoSize: bool
- default:true
If this value is true, the parent element will be equal to the size of the bookmaxShadowOpacity: 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 modemobileScrollSupport: boolean
- default:true
disable content scrolling when touching a book on mobile devicesswipeDistance: 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 fora
andbutton
tags) (new on 1.1.0)useMouseEvents: boolean
- default:true
using mouse and touch events to page flipping (new on 1.2.0)
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 turningchangeOrientation: ("portrait", "landscape")
- triggered when page orientation changeschangeState: ("user_fold", "fold_corner", "flipping", "read")
- triggered when the state of the book changesinit: ({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..." methodsupdate: ({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
getPageCount: number
- Get number of all pagesgetOrientation: 'portrait', 'landscape'
- Get the current orientation: portrait or landscapegetBoundsRect: PageRect
- Get current book sizes and positiongetCurrentPageIndex: 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 imagesloadFromHtml(items: NodeListOf | HTMLElement[])
- Load page from html elementsupdateFromHtml(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)
Oleg,