{"id":17382199,"url":"https://github.com/ts1/flipbook-vue","last_synced_at":"2025-05-15T17:08:58.534Z","repository":{"id":37736251,"uuid":"189577027","full_name":"ts1/flipbook-vue","owner":"ts1","description":"3D page flip effect for Vue.js","archived":false,"fork":false,"pushed_at":"2023-10-18T02:01:04.000Z","size":14577,"stargazers_count":684,"open_issues_count":45,"forks_count":187,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-10T17:47:43.861Z","etag":null,"topics":["3d","coffeescript","coffeescript2","flip","flipbook","page","turn","vue","vue-component"],"latest_commit_sha":null,"homepage":"https://ts1.github.io/flipbook-vue/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ts1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://paypal.me/takeshisone"]}},"created_at":"2019-05-31T10:38:23.000Z","updated_at":"2025-05-06T13:57:49.000Z","dependencies_parsed_at":"2024-06-18T13:59:32.560Z","dependency_job_id":"66130117-915e-42fb-bc69-eeb248ba8bdc","html_url":"https://github.com/ts1/flipbook-vue","commit_stats":null,"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ts1%2Fflipbook-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ts1%2Fflipbook-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ts1%2Fflipbook-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ts1%2Fflipbook-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ts1","download_url":"https://codeload.github.com/ts1/flipbook-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254384989,"owners_count":22062422,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","coffeescript","coffeescript2","flip","flipbook","page","turn","vue","vue-component"],"created_at":"2024-10-16T07:35:47.383Z","updated_at":"2025-05-15T17:08:53.526Z","avatar_url":"https://github.com/ts1.png","language":"Vue","funding_links":["https://paypal.me/takeshisone"],"categories":[],"sub_categories":[],"readme":"# flipbook-vue\n\n[![npm version](https://badge.fury.io/js/flipbook-vue.svg)](https://badge.fury.io/js/flipbook-vue)\n![demo](https://github.com/ts1/flipbook-vue/workflows/demo/badge.svg)\n\n`flipbook-vue` is a Vue component that displays images in 3D page flip effect.\n\nDemo page is [here](https://ts1.github.io/flipbook-vue/).\n\n## Installation\n\nInstall as a module:\n\n```\nnpm i -S flipbook-vue\n```\n\nor\n\n```\nyarn add flipbook-vue\n```\n\nor\n\n```\npnpm add flipbook-vue\n```\n\nOr include in html:\n\n```html\n\u003cscript src=\"https://unpkg.com/flipbook-vue\"\u003e\u003c/script\u003e\n```\n\n\u003e **BREAKING CHANGE**: This form now provides Vue 3 version.\n\u003e 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\"`.\n\n## Usage\n\n```html\n\u003ctemplate\u003e\n  \u003cflipbook class=\"flipbook\" :pages=\"['array', 'of', 'image', 'URLs']\"\u003e\u003c/flipbook\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n.flipbook {\n  width: 90vw;\n  height: 90vh;\n}\n\u003c/style\u003e\n```\n\nIf installed as a module, with Vue 3.x,\n\n```html\n\u003cscript\u003e\nimport Flipbook from 'flipbook-vue'\nexport default {\n  components: { Flipbook }\n}\n\u003c/script\u003e\n```\n\nTo use with Vue 2.x,\n```js\nimport Flipbook from 'flipbook-vue/vue2'\n```\n\n## Props\n\n### `pages`\n\nArray of image URLs. Required.\nAll images should have the same aspect ratio.\n\nIf the first element is `null`, the next element is displayed alone (as the cover page).\n\nAll other props are optional.\n\n### `pagesHiRes`\n\nArray of high resolution versions of image URLs.\nThey are used when zoomed.\n\n### `flipDuration`\n\nDuration of page flipping animation in milliseconds.\nDefaults to 1000.\n\n### `zoomDuration`\n\nDuration of zoom in/out animation in milliseconds.\nDefaults to 500.\n\n### `zooms`\n\nArray of possible magnifications.\n`null` is equivalent to `[1]` (no zoom).\nDefaults to `[1, 2, 4]`. _NOTE_ : Do **NOT** pass an empty array.\n\n### `ambient`\n\nIntensity of ambient light in 0 to 1.\nSmaller value gives more shades.\nDefaults to 0.4.\n\n### `gloss`\n\nIntensity of specular light in 0 to 1.\nHigher value gives more gloss.\nDefaults to 0.6.\n\n### `perspective`\n\nZ-axis distance in pixels between the screen and the viewer.\nHigher value gives less effect.\nDefaults to 2400.\n\n### `nPolygons`\n\nHow many rectangles a single page is horizontally split into.\nHigher value gives higher quality rendering in exchange for performance.\nDefaults to 10.\n\n### `singlePage`\n\nForce single page mode regardless of viewport size.\nDefaults to false.\n\n### `forwardDirection`\n\nReading direction.\nIf your document is right-to-left, set this `\"left\"`.\nDefault is `\"right\"`.\n\n### `centering`\n\nEnable centering of the cover pages.\nDefault is `true`.\n\n### `startPage`\n\nPage number (\u003e= 1) to open.\nDefault is `null`.\n\n### `loadingImage`\n\nURL of an image that is displayed while page is loading.\nBy default internal animated SVG is used.\n\n### `clickToZoom`\n\nZoom in or out on click or tap. Default is `true`.\n\n### `dragToFlip`\n\nFlip page by dragging/swiping. Default is `true`.\n\n### `wheel`\n\nWhen set to `'zoom'`, mouse wheel events zoom in/out the page.\nDefault is `'scroll'`, wheel events and touch pad scroll gestures scroll the zoomed page.\n\n## Events\n\n### `flip-left-start`\n\nFired when flip to left animation starts. Argument is page number before flip.\n\n### `flip-left-end`\n\nFired when flip to left animation ends. Argument is page number after flip.\n\n### `flip-right-start`\n\nFired when flip to right animation starts. Argument is page number before flip.\n\n### `flip-right-end`\n\nFired when flip to right animation ends. Argument is page number after flip.\n\n### `zoom-start`\n\nFired when zoom-in/out animation starts.\nArgument is magnification after zoom.\n\n### `zoom-end`\n\nFired when zoom-in/out animation ends.\nArgument is magnification after zoom.\n\n## Slot props\n\nThis component exposes some properties and methods as slot properties.\nExample usage:\n\n```html\n\u003cflipbook :pages=\"pages\" v-slot=\"flipbook\"\u003e\n  \u003cbutton @click=\"flipbook.flipLeft\"\u003ePrevious Page\u003c/button\u003e\n  \u003cbutton @click=\"flipbook.flipRight\"\u003eNext Page\u003c/button\u003e\n\u003c/flipbook\u003e\n```\n\nFor more practical usage, refer to [`src/App.vue`](https://github.com/ts1/flipbook-vue/blob/master/src/App.vue) (the demo page source).\n\nThese properties and methods can also be referred through `$refs` to the `flipbook` component.\n\n### `canFlipLeft`\n\nTrue if it can flip to previous page. _NOTE_: Can return false if currently being animated.\n\n### `canFlipRight`\n\nTrue if it can flip to next page. _NOTE_: Can return false if currently being animated.\n\n### `canZoomIn`\n\nTrue if it can zoom in.\n\n### `canZoomOut`\n\nTrue if it can zoom out.\n\n### `page`\n\nCurrent page number (1 to `numPages`).\n\n### `numPages`\n\nTotal number of pages.\n\n### `flipLeft()`\n\nMethod to flip to previous page.\n\n### `flipRight()`\n\nMethod to flip to next page.\n\n### `zoomIn()`\n\nMethod to zoom in.\n\n### `zoomOut()`\n\nMethod to zoom out.\n\n## CSS API\n\nYou may need to specify the size of view port in your style sheet, directly to\n`\u003cflipbook\u003e` element, or to `.viewport` sub-element of flipbook.\n\nIf the size is horizontally long and `singlePage` prop is `false` (default), it displays two pages spread, suitable for desktop browsers.\nIf it's vertically long, it displays single pages, suitable for smartphones.\n\nThere are some internal classes.\n\n### `.viewport`\n\nA `\u003cdiv\u003e` element that contains everything but `\u003cslot\u003e`.\n`\u003cslot\u003e` is placed above `.viewport`.\n\n### `.bounding-box`\n\nApproximate bounding box of the displayed images.\nSuitable to give `box-shadow`.\n\n## Browser support\n\nSupports modern browsers and IE 11.\n\n## Development\n\nTo start development server with demo pages:\n\n```\ncd examples/demo\npnpm i\npnpm serve\n```\n\nTo package for npm:\n\n```\npnpm dist\n```\n\n## Credits\n\n- vivekKodira: README correction\n- siderisng: `dragToFlip`\n- MaikoTan: TypeScript support\n\n## License\n\nMIT\n\nCopyright © 2019-2023 Takeshi Sone.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fts1%2Fflipbook-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fts1%2Fflipbook-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fts1%2Fflipbook-vue/lists"}