DOCSEARCHbyAlgolia
Submit Docs

flipbook-vue

repository·master·Indexed 20 days ago

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

A Vue.js component that provides a 3D page flip effect for displaying image sequences, similar to a physical book. It supports Vue 2 and Vue 3, offering features such as high-resolution zoom, customizable flip and zoom durations, lighting controls (ambient and gloss), and programmatic control via refs or scoped slots. Version 1.0.0-beta.4.

Tokens
2.6K
Snippets
5
Records
11
Agent score
23%

What's inside flipbook-vue

  1. Install flipbook-vue

    master

    You can install flipbook-vue as a module using npm, yarn, or pnpm, or include it directly via a <script> tag in your HTML.

    Note for Vue 2 users: The default unpkg link provides the Vue 3 version. If you are using Vue 2.x, you must use the specific Vue 2 distribution path.

    # Using npm
npm i -S flipbook-vue

# Using yarn
yarn add flipbook-vue

# Using pnpm
pnpm add flipbook-vue
    <!-- For Vue 3 -->
<script src="https://unpkg.com/flipbook-vue"></script>

<!-- For Vue 2 (Preferred) -->
<script src="https://unpkg.com/flipbook-vue/dist/vue2/flipbook.min.js"></script>

<!-- For Vue 2 (Alternative) -->
<script src="https://unpkg.com/flipbook-vue@0"></script>

  2. Use flipbook-vue in Vue 3

    master

    To use the component in a Vue 3 project, import Flipbook from the main package and register it in your component's components option. Ensure you set a width and height for the component via CSS so it is visible.

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

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

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

  4. Access flipbook methods and state via slots or refs

    master

    The Flipbook component exposes its internal state and control methods through Slot Props (when using v-slot) or via $refs. This allows you to build custom UI controls like 'Next' and 'Previous' buttons.

    Available Properties and Methods:

    • canFlipLeft: Boolean. True if it can flip to the previous page (returns false if currently animating).
    • canFlipRight: Boolean. True if it can flip to the next page (returns false if currently animating).
    • canZoomIn: Boolean. True if zoom-in is possible.
    • canZoomOut: Boolean. True if zoom-out is possible.
    • page: The current page number (1 to numPages).
    • numPages: Total number of pages.
    • flipLeft(): Method to trigger a flip to the previous page.
    • flipRight(): Method to trigger a flip to the next page.
    • zoomIn(): Method to trigger a zoom in.
    • zoomOut(): Method to trigger a zoom out.
    <flipbook :pages="pages" v-slot="flipbook">
  <button @click="flipbook.flipLeft">Previous Page</button>
  <button @click="flipbook.flipRight">Next Page</button>
</flipbook>

  5. Configure Flipbook component props

    master

    The Flipbook component accepts several props to control its appearance, behavior, and assets.

    Core Assets:

    • pages: An array of strings representing the URLs of the standard resolution images.
    • pagesHiRes: (Optional) An array of strings for high-resolution image URLs.
    • loadingImage: A URL for an image to show while loading.

    Animation & Physics:

    • flipDuration: Duration of the flip animation.
    • zoomDuration: Duration of the zoom animation.
    • zooms: An array of zoom levels.
    • perspective: Perspective value for the 3D effect.
    • nPolygons: Number of polygons used for the page geometry.
    • ambient: Ambient lighting intensity.
    • gloss: Gloss intensity.

    Interaction & Behavior:

    • singlePage: Boolean to enable/disable single page mode.
    • forwardDirection: Set to 'left' or 'right' to define the direction of page turning.
    • centering: Boolean to enable centering.
    • startPage: The initial page to display.
    • clickToZoom: Enables zooming via clicking.
    • dragToFlip: Enables flipping via dragging.
    • wheel: Controls wheel behavior, either 'scroll' or 'zoom'.
    • swipeMin: Minimum swipe distance.

  6. Configure flipbook-vue props

    master

    The Flipbook component accepts several props to control its behavior, appearance, and animation.

    Required Prop:

    • pages: An array of image URLs. All images should have the same aspect ratio. If the first element is null, the next element is displayed alone as the cover page.

    Key Configuration Props:

    • pagesHiRes: Array of high-resolution image URLs used during zoom.
    • flipDuration: Duration of page flipping animation in ms (default: 1000).
    • zoomDuration: Duration of zoom animation in ms (default: 500).
    • zooms: Array of magnification levels. null is equivalent to [1]. Default is [1, 2, 4]. Do not pass an empty array.
    • ambient: Intensity of ambient light (0 to 1, default: 0.4).
    • gloss: Intensity of specular light (0 to 1, default: 0.6).
    • perspective: Z-axis distance in pixels (default: 2400).
    • nPolygons: Horizontal split count for page rendering; higher is better quality but lower performance (default: 10).
    • singlePage: If true, forces single page mode regardless of viewport (default: false).
    • forwardDirection: Reading direction ("right" or "left").
    • centering: Enables centering of cover pages (default: true).
    • startPage: Page number (>= 1) to open (default: null).
    • loadingImage: URL of an image to show while loading (defaults to internal SVG).
    • clickToZoom: Enables zoom on click/tap (default: true).
    • dragToFlip: Enables flipping by dragging/swiping (default: true).
    • wheel: Controls mouse wheel behavior. 'scroll' (default) scrolls the zoomed page; 'zoom' zooms in/out.

  7. Style the flipbook-vue component

    master

    You can target specific internal elements of the flipbook using CSS. Note that you should define the viewport size on the <flipbook> element or its .viewport sub-element.

    Internal CSS Classes:

    • .viewport: A <div> containing everything except the <slot>. The <slot> is positioned above this element.
    • .bounding-box: The approximate bounding box of the displayed images. Useful for applying box-shadow.

  8. Handle flipbook-vue events

    master

    The component emits several events related to page flipping and zooming animations. These can be used to trigger side effects in your application.

    - flip-left-start: Fired when flip to left animation starts. Argument: page number before flip.
- flip-left-end: Fired when flip to left animation ends. Argument: page number after flip.
- flip-right-start: Fired when flip to right animation starts. Argument: page number before flip.
- flip-right-end: Fired when flip to right animation ends. Argument: page number after flip.
- zoom-start: Fired when zoom-in/out animation starts. Argument: magnification after zoom.
- zoom-end: Fired when zoom-in/out animation ends. Argument: magnification after zoom.

  9. Access Flipbook methods via component instance

    master

    The Flipbook component exposes several methods that can be called via a Vue ref to programmatically control the flipbook instance.

    Navigation & Flipping:

    • goToPage(page: number): Navigates to a specific page.
    • flipLeft(): Triggers a left page flip.
    • flipRight(): Triggers a right page flip.
    • flipRevert(): Reverts the current flip.
    • flipAuto(ease: boolean): Triggers an automatic flip with optional easing.
    • flipStart(direction: Direction): Starts a flip in the specified 'left' or 'right' direction.

    Zooming:

    • zoomIn(zoomAt?: ZoomAt): Zooms in.
    • zoomOut(zoomAt?: ZoomAt): Zooms out.
    • zoomTo(zoom: number, zoomAt?: ZoomAt): Zooms to a specific level.
    • zoomAt(touch: ZoomAt): Zooms at a specific coordinate.

    Asset Management:

    • preloadImages(hiRes?: boolean): Preloads images (optionally high-resolution).

  10. Listen to Flipbook component events

    master

    The Flipbook component emits several events that allow you to hook into the animation lifecycle. These are useful for synchronizing external UI or triggering side effects when animations start or end.

    Available events:

    • @zoom-start: Emitted when a zoom animation begins. Returns the current zoom level.
    • @zoom-end: Emitted when a zoom animation completes. Returns the current zoom level.
    • @flip-left-start: Emitted when a left flip animation begins. Returns the current page number.
    • @flip-left-end: Emitted when a left flip animation completes. Returns the current page number.
    • @flip-right-start: Emitted when a right flip animation begins. Returns the current page number.
    • @flip-right-end: Emitted when a right flip animation completes. Returns the current page number.

  11. Use the Flipbook SlotScope for custom controls

    master

    When using scoped slots in the Flipbook component, you can access the SlotScope object to build custom UI controls (like custom buttons for flipping or zooming) and to react to the current state of the flipbook.

    Available properties in SlotScope:

    • page: The current page number.
    • numPages: The total number of pages.
    • canFlipLeft: Boolean indicating if the user can flip to the previous page.
    • canFlipRight: Boolean indicating if the user can flip to the next page.
    • canZoomIn: Boolean indicating if zooming in is possible.
    • canZoomOut: Boolean indicating if zooming out is possible.
    • flipLeft(): Method to trigger a left flip.
    • flipRight(): Method to trigger a right flip.
    • zoomIn(zoomAt?: ZoomAt): Method to trigger a zoom in. Optionally pass a ZoomAt object { pageX: number, pageY: number } to specify the zoom center.
    • zoomOut(zoomAt?: ZoomAt): Method to trigger a zoom out.