Simple library for creating realistic page turning effects
Powerful, simple, and flexible JS Library for creating realistic and beautiful page turning effect.
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
tag: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- root element, where the book will be created
settings: object- configuration object.
To draw on a canvas, use
loadFromImages:
js pageFlip.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);To load page from html elements - use
loadFromHtml:
js pageFlip.loadFromHtml(items);For example:
html```js const pageFlip = new PageFlip(document.getElementById('book'), { width: 400, // required parameter - base page width height: 600 // required parameter - base page height } );Page CoverPage onePage twoPage threePage fourLast page
pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));
Usedata-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- 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: numberYou must set threshold values with size:
"stretch"
drawShadow: bool- default:
trueDraw shadows or not when page flipping
flippingTime: number(milliseconds) - default:
1000Flipping animation time
usePortrait: bool- default:
trueEnable switching to portrait mode. !This mode uses cloning of html elements (pages)
startZIndex: number- default:
0Initial value to z-index
startPage: number- default:
0Page number from which to start viewing
autoSize: bool- default:
trueIf this value is true, the parent element will be equal to the size of the book
maxShadowOpacity: number [0..1]- default:
1Shadow intensity (1: max intensity, 0: hidden shadows)
showCover: boolean- default:
falseIf 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:
truedisable 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:
trueforwarding click events to the page children html elements (only for
aand
buttontags) (new on 1.1.0)
useMouseEvents: boolean- default:
trueusing mouse and touch events to page flipping (new on 1.2.0)
To listen events use the method
on:
js 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 | stringand
object: PageFlip
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)
Oleg,
https://github.com/Nodlik/StPageFlip