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'));

Must Read: 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 of 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 (new on 1.1.0)
• clickEventForward: boolean – default: true forwarding click events to the page children’s HTML elements (only for a and button tags) (new on 1.1.0)
• useMouseEvents: boolean – default: true using mouse and touch events to page flipping (new on 1.2.0)
• 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 (new on 2.0.3)

Methods

Must Read: Elegant Carousel With A Wipe Switch Slider jQuery Plugin | wipeSlider

• 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 (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)

Read More –

[CSS3] Responsive jQuery Coverflow Touch Slider Plugin | flipster
Realistic Flip Clock in JavaScript (jQuery) and CSS Animations
Airport-Like Text Flip Display Animation Plugin For jQuery | splitFlap

See Demo And Download