Simple and Flexible Book Page Flip Animation In JavaScript | StPageFlip

Book Page Flip Effect Javascript JS Library is powerful, simple, and flexible to create a beautiful and realistic page-flipping effect.

Features

  • Works with simple images on canvas and complex HTML blocks
  • Has a 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

Check Here – [Animation] 3D Page Flip Images Effect For Vue component | flipbook

How to make use of it:

Installation:

npm install page-flip

1. 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);

2. To draw on a canvas, use loadFromImages:

pageFlip.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);

3. To load a page from HTML elements – use loadFromHtml:

pageFlip.loadFromHtml(items);
<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'));

Read More – A Vue.js Component To Flip Animation Elements Library

 

Config

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: number You must set threshold values ​​with size: "stretch"
  • drawShadow: bool – default: true Draw shadows or not when page flipping
  • flippingTime: number (milliseconds) – default: 1000 Flipping animation time
  • usePortrait: bool – default: true Enable switching to portrait mode. !This mode uses cloning of html elements (pages)
  • startZIndex: number – default: 0 The initial value to z-index
  • startPage: number – default: 0 Page number from which to start viewing
  • autoSize: bool – default: true If this value is true, the parent element will be equal to the size of the book
  • maxShadowOpacity: 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 the single-page mode
  • mobileScrollSupport: boolean – default: true disable content scrolling when touching a book on mobile devices
  • swipeDistance: number – default: 30 (px) minimum distance to detect swipe
  • clickEventForward: boolean – default: true forwarding click events to the page children’s html elements (only for a and button tags)
  • useMouseEvents: boolean – default: true using mouse and touch events to page flipping
  • disableFlipByClick: boolean – default: false if this value is true, flipping by clicking on the whole book will be locked. Clicking will only work in corners

Methods

  • getPageCount: number – Get the 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
  • updateFromImages(images: ['path-to-image1.jpg', ...]) – Update page from images
  • destroy() – Destructor. Remove a root HTML element and all event handlers 

Realistic Book Page Flip Animation In JavaScript, 3D Page Flip Effect, Page Flip Effect Plugin, Modern Web Design

Read More – 

Realistic Flip Clock in JavaScript (jQuery) and CSS Animations
Airport-Like Text Flip Display Animation Plugin For jQuery | splitFlap


See Demo And Download

Official Website(Nodlik): Click Here

This superior jQuery plugin is developed by Nodlik. For extra advanced usage, please go to the official website.

Share