Author: | Nodlik |
---|---|
Views Total: | 23,220 views |
Official Page: | Go to website |
Last Update: | April 18, 2021 |
License: | MIT |
Preview:

Description:
StPageFlip is a JavaScript library to create a realistic, mobile-friendly, landscape/portrait page flip (also called page turning) animation just like a book or magazine.
Basic usage:
1. Install and import the StPageFlip as an ES module.
# NPM $ npm install page-flip --save
import {PageFlip} from 'page-flip';
2. Or load the page-flip.browser.js
in the HTML document.
<script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.min.js"></script>
3. Add pages to the flipbook. The data-density
is used to specify the book type: ‘hard’ or ‘soft’.
<div class="flip-book" id="example"> <div class="page page-cover page-cover-top" data-density="hard"> <div class="page-content"> <h2>BOOK TITLE</h2> </div> </div> <div class="page"> <div class="page-content"> <h2 class="page-header">Page Header 1</h2> <div class="page-image" style="background-image: url(1.jpg)"></div> <div class="page-text">Page Content 1</div> <div class="page-footer">2</div> </div> </div> <div class="page"> <div class="page-content"> <h2 class="page-header">Page Header 2</h2> <div class="page-image" style="background-image: url(2.jpg)"></div> <div class="page-text">Page Content 2</div> <div class="page-footer">3</div> </div> </div> ... more pages here ... <div class="page page-cover page-cover-bottom" data-density="hard"> <div class="page-content"> <h2>THE END</h2> </div> </div> </div>
4. Initialize the library and pass options as follows:
// ES Module const pageFlip = new PageFlip( document.getElementById("example"), { // options here } ); // Browser const pageFlip = new St.PageFlip( document.getElementById("example"), { // options here } );
5. Load pages from HTML.
pageFlip.loadFromHTML(document.querySelectorAll(".page"));
6. Or load pages from images if running on the Canvas mode:
pageFlip.loadFromImages(['1.jpg', '2.jpg' ... ]);
7. Available options to config the StPageFlip instance.
// ES Module const pageFlip = new PageFlip( document.getElementById("example"), { // start page index startPage: 0, size: SizeType.FIXED, // width & height *(REQUIRED) width: 0, height: 0, // min/max width & height minWidth: 0, maxWidth: 0, minHeight: 0, maxHeight: 0, // draw book shadows drawShadow: true, // animation speed flippingTime: 1000, // allows to switch to portrait mode usePortrait: true, // z-index property startZIndex: 0, // auto resizes the parent container to fit the book autoSize: true, // max opacity of shadow maxShadowOpacity: 1, // shows book cover showCover: false, // supports mobile scroll? mobileScrollSupport: true } );
8. API methods.
// get total number of pages pageFlip.getPageCount(); // get the current page index pageFlip.getCurrentPageIndex(); // turn to a specific page pageFlip.turnToPage(pageNum: number); // turn to the next page pageFlip.turnToNextPage(); // turn to the previous page pageFlip.turnToPrevPage(); // turn to the next page with animation pageFlip.flipNext(corner: 'top' | 'bottom'); // turn to the previous page with animation pageFlip.flipPrev(corner: 'top' | 'bottom'); // turn to a specific page with animation pageFlip.flip(pageNum: number, corner: 'top' | 'bottom'); // update pages pageFlip.updateFromHtml(items: NodeListOf | HTMLElement[]); pageFlip.updateFromImages(images: ['path-to-image1.jpg', ...]); // destroy the instance pageFlip.destroy();
9. Event handlers.
// triggered by page turning pageFlip.on("flip", (e) => { document.querySelector(".page-current").innerText = e.data + 1; }); // triggered when the state of the book changes pageFlip.on("changeState", (e) => { // ("user_fold", "fold_corner", "flipping", "read") }); // triggered when page orientation changes pageFlip.on("changeOrientation", (e) => { // ("portrait", "landscape") }); // triggered when the book is init and the start page is loaded pageFlip.on("init", (e) => { ({page: number, mode: 'portrait', 'landscape'}) }); // triggered when the book pages are updated pageFlip.on("update", (e) => { // ({page: number, mode: 'portrait', 'landscape'}) });
Changelog:
v2.0.7 (04/18/2021)
- Fixed a bug with resizing the window after updating book state
v2.0.6 (04/17/2021)
- fix shadow after update
v2.0.5 (02/27/2021)
- Fix var name
v2.0.2 (02/15/2021)
- Fix constructor, fix td
v2.0.1 (02/14/2021)
- Refactor
v2.0.0 (08/17/2020)
- Refactor
v1.2.1 (08/16/2020)
- Added “init” and”update” events
v1.1.0 (07/11/2020)
- Append event forwarding to child elements
v1.0.3 (07/11/2020)
- Bugfix
v1.0.1 (07/08/2020)
- Refactoring
v1.0.1 (07/02/2020)
- Fix: Swipe distance and mobile scroll