How To Do Page Turn Animation In Html

Author:	Nodlik
Views Total:	14,044 views
Official Page:	Go to website
Last Update:	April xviii, 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 only like a book or magazine.

Bones usage:

1. Install and import the StPageFlip equally an ES module.

# NPM $ npm install page-flip --save

import {PageFlip} from 'page-flip';

ii. Or load the folio-flip.browser.js in the HTML certificate.

<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 volume type: 'hard' or 'soft'.

<div class="flip-book" id="example">   <div class="folio page-comprehend folio-embrace-top" data-density="hard">     <div form="page-content">       <h2>Volume Championship</h2>     </div>   </div>   <div class="page">     <div grade="page-content">       <h2 form="page-header">Page Header i</h2>       <div class="folio-image" style="background-image: url(1.jpg)"></div>       <div grade="page-text">Folio Content 1</div>       <div class="folio-footer">2</div>     </div>   </div>   <div grade="page">     <div course="folio-content">       <h2 course="page-header">Page Header ii</h2>       <div course="folio-prototype" style="background-paradigm: url(two.jpg)"></div>       <div grade="folio-text">Folio Content ii</div>       <div grade="page-footer">3</div>     </div>   </div>   ... more pages here ...   <div course="page page-comprehend page-cover-lesser" data-density="hard">     <div form="page-content">       <h2>THE END</h2>     </div>   </div> </div>

four. Initialize the library and laissez passer options every bit follows:

// ES Module const pageFlip = new PageFlip(       certificate.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"),         {           // outset page index           startPage: 0,           size: SizeType.Fixed,           // width & height *(REQUIRED)           width: 0,           height: 0,           // min/max width & peak           minWidth: 0,           maxWidth: 0,           minHeight: 0,           maxHeight: 0,           // draw book shadows           drawShadow: true,           // blitheness speed           flippingTime: yard,           // allows to switch to portrait style           usePortrait: true,           // z-alphabetize property           startZIndex: 0,           // auto resizes the parent container to fit the book           autoSize: truthful,           // max opacity of shadow           maxShadowOpacity: 1,           // shows volume cover           showCover: false,           // supports mobile whorl?           mobileScrollSupport: true         } );

eight. API methods.

// get total number of pages pageFlip.getPageCount(); // become the current page index pageFlip.getCurrentPageIndex(); // plow to a specific page pageFlip.turnToPage(pageNum: number); // turn to the next page pageFlip.turnToNextPage(); // plow to the previous folio pageFlip.turnToPrevPage(); // turn to the adjacent folio with animation pageFlip.flipNext(corner: 'acme' | 'bottom'); // plough to the previous folio with animation pageFlip.flipPrev(corner: 'height' | 'lesser'); // plow to a specific page with blitheness 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(".folio-current").innerText = due east.information + 1; }); // triggered when the country 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 get-go page is loaded pageFlip.on("init", (due east) => {   ({folio: number, mode: 'portrait', 'landscape'}) }); // triggered when the book pages are updated pageFlip.on("update", (e) => {   // ({page: number, mode: 'portrait', 'mural'}) });

Changelog:

v2.0.7 (04/18/2021)

• Fixed a issues with resizing the window after updating book state

v2.0.6 (04/17/2021)

• fix shadow after update

v2.0.5 (02/27/2021)

• Set up var name

v2.0.2 (02/15/2021)

• Gear up constructor, fix td

v2.0.1 (02/xiv/2021)

• Refactor

v2.0.0 (08/17/2020)

• Refactor

v1.2.one (08/xvi/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.i (07/02/2020)

• Set: Swipe distance and mobile scroll

Source: https://www.cssscript.com/book-page-flip-animation/

Posted by: hernandezflery1974.blogspot.com

Share this post