Realistic Book Page Flip Animation In JavaScript – StPageFlip

Category: Animation , Javascript , Recommended | July 11, 2020
Author: Nodlik
Views Total: 42 views
Official Page: Go to website
Last Update: July 11, 2020
License: MIT

Preview:

Realistic Book Page Flip Animation In JavaScript – StPageFlip

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) => {
  document.querySelector(".page-state").innerText = e.data;
});

// triggered when page orientation changes
pageFlip.on("changeOrientation", (e) => {
  document.querySelector(".page-orientation").innerText = e.data;
});

Changelog:

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

You Might Be Interested In:


Leave a Reply