A Vue component that displays images in 3D page flip effect

A Vue component that displays images in 3D page flip effect

Contribute to ts1/flipbook-vue development by creating an account on GitHub. ... flipbook-vue is a Vue component that displays images in 3D page flip effect.

flipbook-vue

flipbook-vue is a Vue component that displays images in 3D page flip effect.

Demo page is here.

Installation

Install as a module:

npm i -S flipbook-vue

or

yarn add flipbook-vue

Or include in html:

text-html-basic
<script src="https://unpkg.com/flipbook-vue"></script>

Usage

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

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

If installed as a module,

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

If you would like to build from .vue directly (including CoffeeScript transpile, etc),

source-js
import Flipbook from 'flipbook-vue/sfc'

or

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

Props

pages

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

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

Array of possible magnifications. null is equivalent to [1] (no zoom). Defaults to [1, 2, 4].

ambient

Intensity of ambient light in 0 to 1. Smaller value gives more shades. Defaults to 0.4.

gloss

Intensity of specular light in 0 to 1. Higher value gives more gloss. Defaults to 0.6.

perspective

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

nPolygons

How many rectangles a single page is horizontally split into. 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.

Events

flip-left-start

Fired when flip to left animation starts. Argument is page number before flip.

flip-left-end

Fired when flip to left animation ends. Argument is page number after flip.

flip-right-start

Fired when flip to right animation starts. Argument is page number before flip.

flip-right-end

Fired when flip to right animation ends. Argument is page number after flip.

zoom-start

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

zoom-end

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

Slot props

This component exposes some properties and methods as slot properties. Example usage:

text-html-basic
<flipbook :pages="pages" v-slot="flipbook">
  <button @click="flipbook.flipLeft">Previous Page</button>
  <button @click="flipbook.flipRight">Next Page</button>
</flipbook>

For more practical usage, refer to src/App.vue (the demo page source).

These properties and methods can also be referred through $refs to the flipbook component.

canFlipLeft

True if it can flip to previous page.

canFlipRight

True if it can flip to next page.

canZoomIn

True if it can zoom in.

canZoomOut

True if it can zoom out.

page

Current page number (1 to numPages).

numPages

Total number of pages.

flipLeft()

Method to flip to previous page.

flipRight()

Method to flip to next page.

zoomIn()

Method to zoom in.

zoomOut()

Method to zoom out.

CSS API

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

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

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

.bounding-box

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

Browser support

Supports modern browsers and IE 11.

Server-side rendering, or Nuxt support

Server-side rendering is not supported. Configure this component rendered only on client-side. See this issue.

Development

To start development server with demo pages:

yarn
yarn serve

To package for npm:

yarn dist

Github

ts1/flipbook-vue

vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app? **[Hire Dedicated VueJS Developers](https://hourlydeveloper.io/hire-dedicated-vue-js-developer/ "Hire Dedicated VueJS Developers")** on the contract (time/project) basis providing regular...

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

What is ECMAScript and How is it Different From JavaScript?

Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.here is a complete story on the history of JavaScript and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997.

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.