Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ts1/flipbook-vue
3D page flip effect for Vue.js
https://github.com/ts1/flipbook-vue
3d coffeescript coffeescript2 flip flipbook page turn vue vue-component
Last synced: 28 days ago
JSON representation
3D page flip effect for Vue.js
- Host: GitHub
- URL: https://github.com/ts1/flipbook-vue
- Owner: ts1
- Created: 2019-05-31T10:38:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-18T02:01:04.000Z (about 1 year ago)
- Last Synced: 2024-09-19T01:24:24.403Z (about 2 months ago)
- Topics: 3d, coffeescript, coffeescript2, flip, flipbook, page, turn, vue, vue-component
- Language: Vue
- Homepage: https://ts1.github.io/flipbook-vue/
- Size: 13.9 MB
- Stars: 621
- Watchers: 18
- Forks: 159
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# flipbook-vue
[](https://badge.fury.io/js/flipbook-vue)
`flipbook-vue` is a Vue component that displays images in 3D page flip effect.
Demo page is [here](https://ts1.github.io/flipbook-vue/).
## Installation
Install as a module:
```
npm i -S flipbook-vue
```
or
```
yarn add flipbook-vue
```
or
```
pnpm add flipbook-vue
```
Or include in html:
```html
```
> **BREAKING CHANGE**: This form now provides Vue 3 version.
> If you are using Vue 2.x, use `"https://unpkg.com/flipbook-vue/dist/vue2/flipbook.min.js"` (preferred) or `"https://unpkg.com/flipbook-vue@0"`.
## Usage
```html
.flipbook {
width: 90vw;
height: 90vh;
}
```
If installed as a module, with Vue 3.x,
```html
import Flipbook from 'flipbook-vue'
export default {
components: { Flipbook }
}
```
To use with Vue 2.x,
```js
import Flipbook from 'flipbook-vue/vue2'
```
## 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]`. _NOTE_ : Do **NOT** pass an empty array.
### `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`.
### `loadingImage`
URL of an image that is displayed while page is loading.
By default internal animated SVG is used.
### `clickToZoom`
Zoom in or out on click or tap. Default is `true`.
### `dragToFlip`
Flip page by dragging/swiping. Default is `true`.
### `wheel`
When set to `'zoom'`, mouse wheel events zoom in/out the page.
Default is `'scroll'`, wheel events and touch pad scroll gestures scroll the zoomed page.
## 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:
```html
Previous Page
Next Page
```
For more practical usage, refer to [`src/App.vue`](https://github.com/ts1/flipbook-vue/blob/master/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. _NOTE_: Can return false if currently being animated.
### `canFlipRight`
True if it can flip to next page. _NOTE_: Can return false if currently being animated.
### `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
`` 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 `
` element that contains everything but ``.
`` 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.
## Development
To start development server with demo pages:
```
cd examples/demo
pnpm i
pnpm serve
```
To package for npm:
```
pnpm dist
```
## Credits
- vivekKodira: README correction
- siderisng: `dragToFlip`
- MaikoTan: TypeScript support
## License
MIT
Copyright © 2019-2023 Takeshi Sone.