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

Flipbook is a Vue component that renders images in a 3D page flip effect just like a book.

You may need to specify the size of the view port in your style sheet, directly to <flipbook> the element, or to .viewport the sub-element of the flipbook.

How to make use of it:

Install and download:

# Yarn
$ yarn add flipbook-vue

# NPM
$ npm install flipbook-vue --save
<script src="https://unpkg.com/flipbook-vue"></script>

Usage template

<template>
  <flipbook class="flipbook" :pages="['array', 'of', 'image', 'URLs']"></flipbook>
</template>

<style>
.flipbook {
  width: 90vw;
  height: 90vh;
}
</style>

If installed as a module.

<script>
import Flipbook from 'flipbook-vue'
export default {
  components: { Flipbook }
}
</script>

If you want to build from .vue directly (including interpretation, etc.).

import Flipbook from 'flipbook-vue/sfc'

import Flipbook from 'flipbook-vue/src/Flipbook.vue'

Props

pages

An array of image URLs. Required. All images should have the same aspect ratio.

If the first element is null, the next element is displayed alone (as the cover page).

All other props are optional.

pagesHiRes

An array of high-resolution versions of image URLs. They are used when zoomed.

flipDuration

Duration of page flipping animation in milliseconds. Defaults to 1000.

zoomDuration

Duration of zoom in/out animation in milliseconds. Defaults to 500.

zooms

An array of possible magnifications. null is equivalent to [1] (no zoom). Defaults to [1, 2, 4]NOTE: Do NOT pass an empty array.

ambient

The intensity of ambient light is 0 to 1. Smaller value gives more shades. Defaults to 0.4.

gloss

The intensity of specular light is 0 to 1. A higher value gives more gloss. Defaults to 0.6.

perspective

Z-axis distance in pixels between the screen and the viewer. A higher value gives less effect. Defaults to 2400.

nPolygons

How many rectangles a single page is horizontally split into? A higher value gives higher quality rendering in exchange for performance. Defaults to 10.

singlePage

Force single-page mode regardless of viewport size. Defaults to false.

forwardDirection

Reading direction. If your document is right-to-left, set this "left". Default is "right".

centering

Enable centering of the cover pages. Default is true.

startPage

Page number (>= 1) to open. Default is null.

loadingImage

URL of an image that is displayed while the page is loading. By default, internal animated SVG is used.

clickToZoom

Zoom in or out on click or tap. Default is true.

dragToFlip

Flip the page by dragging/swiping. Default is true.

Events

flip-left-start

Fired when flipping to left animation starts. The argument is page number before the flip.

flip-left-end

Fired when flip to left animation ends. The argument is page number after the flip.

flip-right-start

Fired when flipping to the right animation starts. The argument is page number before the flip.

flip-right-end

Fired when flip to right animation ends. The argument is page number after the flip.

zoom-start

Fired when zoom-in/out animation starts. The argument is magnification after zoom.

zoom-end

Fired when zoom-in/out animation ends. The argument is magnification after zoom.

CSS API

If the size is horizontally long and singlePage prop is false (default), it displays two pages spread, suitable for desktop browsers. If it’s vertically long, it displays single pages, suitable for smartphones.

There are some internal classes.

.viewport

<div> the element that contains everything but <slot><slot> is placed above .viewport.

.bounding-box

The approximate bounding box of the displayed images. Suitable to give box-shadow.

3D Page Flip Effect For Vue.js, flipbook Plugin/Github, turn js responsive flipbook, page turn animation js, book page flip animation code, pageflip animation source


See Demo And Download

Official Website(ts1): Click Here

This superior jQuery/javascript plugin is developed by ts1. For extra Advanced Usage, please go to the official website.

Share