3D Page Flip Effect For Vue.js – flipbook

flipbook is a Vue 3/2 component that displays images in a 3D page flip effect just like a book.

How to use it:

1. Import and register the flipbook.

// Vue 3
import Flipbook from 'flipbook-vue'

// Vue 2
import Flipbook from 'flipbook-vue/vue2'
// register the component
export default {
  components: { Flipbook }
}

2. Add the flipbook component to the template and define an array of images.

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

3. Possible component props.

pages:
  type: Array
  required: true
pagesHiRes: // Array of high resolution versions
  type: Array
  default: -> []
flipDuration:
  type: Number
  default: 1000
zoomDuration:
  type: Number
  default: 500
zooms:
  type: Array
  default: -> [1, 2, 4]
perspective:
  type: Number
  default: 2400
nPolygons:
  type: Number
  default: 10
ambient:
  type: Number
  default: 0.4
gloss:
  type: Number
  default: 0.6
swipeMin:
  type: Number
  default: 3
singlePage:
  type: Boolean
  default: false
forwardDirection:
  validator: (val) -> val == 'right' or val == 'left'
  default: 'right'
centering:
  type: Boolean
  default: true
startPage:
  type: Number
  default: null
loadingImage:
  type: String
  default: spinner
clickToZoom:
  type: Boolean
  default: true
dragToFlip:
  type: Boolean
  default: true

4. Slot props.

<flipbook :pages="pages" v-slot="flipbook">
  <button @click="flipbook.flipLeft">Previous Page</button>
  <button @click="flipbook.flipRight">Next Page</button>
</flipbook>
// can flip to prev page
canFlipLeft
True if it can flip to previous page. NOTE: Can return false if currently being animated.

// can flip to next page
canFlipRight

// can zoom in
True if it can zoom in.

// can zoom out
True if it can zoom out.

// current page
page

// total number of pages.
numPages

// zoom in 
zoomIn()

// zoom out
zoomOut()

5. Events.

  • @flip-left-start
  • @flip-left-end
  • @flip-right-start
  • @flip-right-end
  • @zoom-start
  • @zoom-end

Preview:

3D Page Flip Effect For Vue.js - flipbook

Changelog:

v1.0.0alph4 (09/03/2022)

  • Add navigator check

Download Details:

Author: ts1

Live Demo: https://ts1.github.io/flipbook-vue/

Download Link: https://github.com/ts1/flipbook-vue/archive/master.zip

Official Website: https://github.com/ts1/flipbook-vue

Install & Download:

# Yarn
$ yarn add flipbook-vue

# NPM
$ npm install flipbook-vue --save
Tags:

Add Comment