├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── README.md ├── README_zh.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico ├── images-large │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── 6.jpg ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ └── 6.jpg └── index.html ├── rollup.config.js ├── src ├── App.vue ├── assets │ └── images │ │ └── spinner.svg ├── base │ └── js │ │ └── Matrix.js ├── components │ └── vue-book-effects.vue ├── main.js └── vue-book-effects.js ├── vue.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ['plugin:vue/essential', '@vue/standard'], 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 13 | indent: 0, 14 | 'space-before-function-paren': 0 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | demo 5 | 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "bracketSpacing": true, 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "jsxBracketSameLine": true, 8 | "semi": false, 9 | "printWidth": 200, 10 | "overrides": [ 11 | { 12 | "files": ".prettierrc", 13 | "options": { "parser": "json" } 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-book-effects 2 | 3 | [![npm version](https://badge.fury.io/js/vue-book-effects.svg)](https://badge.fury.io/js/vue-book-effects) 4 | 5 | `vue-book-effects` is a Vue component that displays images in 3D page flip effect. 6 | 7 | Demo page is [here](https://examples.nsearh.com/book-effects/). 8 | 9 | [中文文档](https://github.com/Sea-DH1/vue-book-effects/blob/main/README_zh.md) 10 | 11 | ## Installation 12 | 13 | Install as a module: 14 | 15 | ``` 16 | npm i -S vue-book-effects 17 | ``` 18 | 19 | or 20 | 21 | ``` 22 | yarn add vue-book-effects 23 | ``` 24 | 25 | Or include in html: 26 | 27 | ```html 28 | 29 | ``` 30 | 31 | ## Usage 32 | 33 | ```html 34 | 37 | 38 | 44 | ``` 45 | 46 | If installed as a module, 47 | 48 | ```html 49 | 55 | ``` 56 | 57 | If you would like to build from `.vue`, 58 | 59 | ```javascript 60 | import VueBookEffects from 'vue-book-effects/sfc' 61 | ``` 62 | 63 | or 64 | 65 | ```javascript 66 | import VueBookEffects from 'vue-book-effects/src/vue-book-effects' 67 | ``` 68 | 69 | ## Props 70 | 71 | ### `pages` 72 | 73 | Array of image URLs. Required. 74 | All images should have the same aspect ratio. 75 | 76 | If the first element is `null`, the next element is displayed alone (as the cover page). 77 | 78 | All other props are optional. 79 | 80 | ### `pagesHiRes` 81 | 82 | Array of high resolution versions of image URLs. 83 | They are used when zoomed. 84 | 85 | ### `flipDuration` 86 | 87 | Duration of page flipping animation in milliseconds. 88 | Defaults to 1000. 89 | 90 | ### `zoomDuration` 91 | 92 | Duration of zoom in/out animation in milliseconds. 93 | Defaults to 500. 94 | 95 | ### `zooms` 96 | 97 | Array of possible magnifications. 98 | `null` is equivalent to `[1]` (no zoom). 99 | Defaults to `[1, 2, 4]`. _NOTE_ : Do **NOT** pass an empty array. 100 | 101 | ### `ambient` 102 | 103 | Intensity of ambient light in 0 to 1. 104 | Smaller value gives more shades. 105 | Defaults to 0.4. 106 | 107 | ### `gloss` 108 | 109 | Intensity of specular light in 0 to 1. 110 | Higher value gives more gloss. 111 | Defaults to 0.6. 112 | 113 | ### `perspective` 114 | 115 | Z-axis distance in pixels between the screen and the viewer. 116 | Higher value gives less effect. 117 | Defaults to 2400. 118 | 119 | ### `nPolygons` 120 | 121 | How many rectangles a single page is horizontally split into. 122 | Higher value gives higher quality rendering in exchange for performance. 123 | Defaults to 10. 124 | 125 | ### `singlePage` 126 | 127 | Force single page mode regardless of viewport size. 128 | Defaults to false. 129 | 130 | ### `forwardDirection` 131 | 132 | Reading direction. 133 | If your document is right-to-left, set this `"left"`. 134 | Default is `"right"`. 135 | 136 | ### `centering` 137 | 138 | Enable centering of the cover pages. 139 | Default is `true`. 140 | 141 | ### `startPage` 142 | 143 | Page number (>= 1) to open. 144 | Default is `null`. 145 | 146 | ### `loadingImage` 147 | 148 | URL of an image that is displayed while page is loading. 149 | By default internal animated SVG is used. 150 | 151 | ## Events 152 | 153 | ### `flip-left-start` 154 | 155 | Fired when flip to left animation starts. Argument is page number before flip. 156 | 157 | ### `flip-left-end` 158 | 159 | Fired when flip to left animation ends. Argument is page number after flip. 160 | 161 | ### `flip-right-start` 162 | 163 | Fired when flip to right animation starts. Argument is page number before flip. 164 | 165 | ### `flip-right-end` 166 | 167 | Fired when flip to right animation ends. Argument is page number after flip. 168 | 169 | ### `zoom-start` 170 | 171 | Fired when zoom-in/out animation starts. 172 | Argument is magnification after zoom. 173 | 174 | ### `zoom-end` 175 | 176 | Fired when zoom-in/out animation ends. 177 | Argument is magnification after zoom. 178 | 179 | ## Slot props 180 | 181 | This component exposes some properties and methods as slot properties. 182 | Example usage: 183 | 184 | ```html 185 | 186 | 187 | 188 | 189 | ``` 190 | 191 | For more practical usage, refer to [`src/App.vue`](https://github.com/Sea-DH1/vue-book-effects/blob/main/src/App.vue) (the demo page source). 192 | 193 | These properties and methods can also be referred through `$refs` to the `vue-book-effects` component. 194 | 195 | ### `canFlipLeft` 196 | 197 | True if it can flip to previous page. _NOTE_: Can return false if currently being animated. 198 | 199 | ### `canFlipRight` 200 | 201 | True if it can flip to next page. _NOTE_: Can return false if currently being animated. 202 | 203 | ### `canZoomIn` 204 | 205 | True if it can zoom in. 206 | 207 | ### `canZoomOut` 208 | 209 | True if it can zoom out. 210 | 211 | ### `page` 212 | 213 | Current page number (1 to `numPages`). 214 | 215 | ### `numPages` 216 | 217 | Total number of pages. 218 | 219 | ### `flipLeft()` 220 | 221 | Method to flip to previous page. 222 | 223 | ### `flipRight()` 224 | 225 | Method to flip to next page. 226 | 227 | ### `zoomIn()` 228 | 229 | Method to zoom in. 230 | 231 | ### `zoomOut()` 232 | 233 | Method to zoom out. 234 | 235 | ## CSS API 236 | 237 | You may need to specify the size of view port in your style sheet, directly to 238 | `` element, or to `.viewport` sub-element of vue-book-effects. 239 | 240 | If the size is horizontally long and `singlePage` prop is `false` (default), it displays two pages spread, suitable for desktop browsers. 241 | If it's vertically long, it displays single pages, suitable for smartphones. 242 | 243 | There are some internal classes. 244 | 245 | ### `.viewport` 246 | 247 | A `
` element that contains everything but ``. 248 | `` is placed above `.viewport`. 249 | 250 | ### `.bounding-box` 251 | 252 | Approximate bounding box of the displayed images. 253 | Suitable to give `box-shadow`. 254 | 255 | ## Browser support 256 | 257 | Supports modern browsers and IE 11. 258 | 259 | ## Development 260 | 261 | To start development server with demo pages: 262 | 263 | ``` 264 | yarn 265 | yarn serve 266 | ``` 267 | 268 | To package for npm: 269 | 270 | ``` 271 | yarn dist 272 | ``` 273 | 274 | ## License 275 | 276 | MIT 277 | 278 | Copyright © 2021-present Sea. 279 | -------------------------------------------------------------------------------- /README_zh.md: -------------------------------------------------------------------------------- 1 | # vue-book-effects 2 | 3 | [![npm version](https://badge.fury.io/js/vue-book-effects.svg)](https://badge.fury.io/js/vue-book-effects) 4 | 5 | `vue-book-effects` 是一个 Vue 组件，以 3D 翻页效果显示图像。 6 | 7 | [Demo](https://examples.nsearh.com/book-effects/). 8 | 9 | [Documentation](https://github.com/Sea-DH1/vue-book-effects/blob/main/README.md) 10 | 11 | ## 安装 12 | 13 | 作为模块安装： 14 | 15 | ``` 16 | npm i -S vue-book-effects 17 | ``` 18 | 19 | or 20 | 21 | ``` 22 | yarn add vue-book-effects 23 | ``` 24 | 25 | 直接在 html 中使用： 26 | 27 | ```html 28 | 29 | ``` 30 | 31 | ## Usage 32 | 33 | ```html 34 | 37 | 38 | 44 | ``` 45 | 46 | 如果你想直接从 `.vue` 构建， 47 | 48 | ```javascript 49 | import VueBookEffects from 'vue-book-effects/sfc' 50 | ``` 51 | 52 | or 53 | 54 | ```javascript 55 | import VueBookEffects from 'vue-book-effects/src/vue-book-effects' 56 | ``` 57 | 58 | ## Props 59 | 60 | ### `pages` 61 | 62 | 图片必须用数组的存放 63 | 64 | 所有图像应具有相同的宽高比。 65 | 66 | 如果第一个元素是`null`，则单独显示一个图片元素。 67 | 68 | 其他属性都是可选的。 69 | 70 | ### `pagesHiRes` 71 | 72 | 高分辨率的图片数组。 73 | 主要在缩放时使用。 74 | 75 | ### `flipDuration` 76 | 77 | 页面翻转动画的持续时间（以毫秒为单位）。默认为 1000。 78 | 79 | ### `zoomDuration` 80 | 81 | 以毫秒为单位的放大/缩小动画的持续时间。默认为 500。 82 | 83 | ### `zooms` 84 | 85 | 一系列可能的放大倍数。 null相当于[1]（无缩放）。默认为[1, 2, 4]。 86 | 87 | 注：不要传递空数组。 88 | 89 | ### `ambient` 90 | 91 | 环境光强度在 0 到 1 之间。值越小，阴影越多。默认为0.4。 92 | 93 | ### `gloss` 94 | 95 | 镜面光强度在 0 到 1 之间。值越高，光泽度越高。默认为 0.6。 96 | 97 | ### `perspective` 98 | 99 | 屏幕和观看者（用户屏幕）之间的 Z 轴距离（以像素为单位）。 较高的值产生的效果较小。 默认为 2400。 100 | 101 | ### `nPolygons` 102 | 103 | 单个页面被水平分割成多少个矩形。 更高的值提供更高质量的渲染以换取性能。 默认为 10。 104 | 105 | ### `singlePage` 106 | 107 | 无视窗口大小，都强制使用单页模式。 108 | 默认为`false`。 109 | 110 | ### `forwardDirection` 111 | 112 | 阅读方向。 113 | 如果您的文档是从右到左，请设置此`left`。 114 | 默认为`true`。 115 | 116 | ### `centering` 117 | 118 | Enable centering of the cover pages. 119 | Default is `true`. 120 | 121 | ### `startPage` 122 | 123 | 启用封面居中。 124 | 默认值为`true`。 125 | 126 | ### `loadingImage` 127 | 128 | 页面加载时显示的图像的 URL。 129 | 默认情况下使用内部动画 SVG。 130 | 131 | ## Events 132 | 133 | ### `flip-left-start` 134 | 135 | 当向左翻转动画开始时触发。 136 | 137 | 参数是翻页前的页码。 138 | 139 | ### `flip-left-end` 140 | 141 | 当向左翻转动画结束时触发。 142 | 143 | 参数是翻转后的页码。 144 | 145 | ### `flip-right-start` 146 | 147 | 当向右翻转动画开始时触发。 148 | 149 | 参数是翻页前的页码。 150 | 151 | ### `flip-right-end` 152 | 153 | 当向右翻转动画结束时触发。 154 | 155 | 参数是翻转后的页码。 156 | 157 | ### `zoom-start` 158 | 159 | 当放大/缩小动画开始时触发。 160 | 161 | 参数是缩放后的放大倍数。 162 | 163 | ### `zoom-end` 164 | 165 | 当放大/缩小动画结束时触发。 166 | 167 | 参数是缩放后的放大倍数。 168 | 169 | ## Slot props 170 | 171 | 该组件将一些属性和方法公开为插槽属性。 172 | 173 | Example usage: 174 | 175 | ```html 176 | 177 | 178 | 179 | 180 | ``` 181 | 182 | 更多实际使用请参考 [`src/App.vue`](https://github.com/Sea-DH1/vue-book-effects/blob/main/src/App.vue) (the demo page source). 183 | 184 | 这些属性和方法也可以通过 `$refs` 引用到 `vue-book-effects` 组件。 185 | 186 | ### `canFlipLeft` 187 | 188 | 如果可以翻到上一页，则为`true`。 189 | 190 | _NOTE_: 如果当前正在动画中，可以返回`false`。 191 | 192 | ### `canFlipRight` 193 | 194 | 如果可以翻到下一页则为`true`。 195 | 196 | _NOTE_: 如果当前正在动画中，可以返回`false`。 197 | 198 | ### `canZoomIn` 199 | 200 | 如果可以放大，则为`true`。 201 | 202 | ### `canZoomOut` 203 | 204 | 如果可以缩小，则为`true`。 205 | 206 | ### `page` 207 | 208 | 当前页码 (1 to `numPages`). 209 | 210 | ### `numPages` 211 | 212 | 总页数 213 | 214 | ### `flipLeft()` 215 | 216 | 翻到上一页的方法。 217 | 218 | ### `flipRight()` 219 | 220 | 翻到下一页的方法。 221 | 222 | ### `zoomIn()` 223 | 224 | 放大的方法。 225 | 226 | ### `zoomOut()` 227 | 228 | 缩小的方法。 229 | 230 | ## CSS API 231 | 232 | 可能需要在样式表中直接指定视口的大小 233 | `` 元素，或 vue-book-effects 的 `.viewport` 子元素。 234 | 235 | 如果尺寸为横向长且 `singlePage` 属性为 `false`（默认），则显示两页展开，适用于桌面浏览器。 236 | 如果纵向较长，则显示单页，适用于智能手机。 237 | 238 | 内部样式。 239 | 240 | ### `.viewport` 241 | 242 | 一个 `
` 元素，包含除 `` 之外的所有内容。 243 | `` 包裹 `.viewport`。 244 | 245 | ### `.bounding-box` 246 | 247 | 显示图像的近似边界框。 248 | 适用于赋予`box-shadow`（阴影）效果。 249 | 250 | ## Browser support 251 | 252 | 支持主流浏览器和 IE 11。 253 | 254 | ## Development 255 | 256 | 使用Development： 257 | 258 | ``` 259 | yarn 260 | yarn serve 261 | ``` 262 | 263 | To package for npm: 264 | 265 | ``` 266 | yarn dist 267 | ``` 268 | 269 | ## License 270 | 271 | MIT 272 | 273 | Copyright © 2021-present Sea. 274 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-book-effects", 3 | "version": "0.4.3", 4 | "license": "MIT", 5 | "description": "3D page flip effect for Vue.js", 6 | "homepage": "https://examples.nsearh.com/book-effects/", 7 | "author": "Sea-DH1 (https://github.com/Sea-DH1/vue-book-effects)", 8 | "repository": "github:Sea-DH1/vue-book-effects", 9 | "keywords": [ 10 | "vue", 11 | "vue-book-effects", 12 | "component", 13 | "book", 14 | "page", 15 | "book-effects", 16 | "turn", 17 | "3d" 18 | ], 19 | "main": "dist/vue-book-effects.cjs.js", 20 | "module": "dist/vue-book-effects.es.js", 21 | "unpkg": "dist/vue-book-effects.min.js", 22 | "browser": { 23 | "./sfc": "src/components/vue-book-effects.vue" 24 | }, 25 | "scripts": { 26 | "serve": "vue-cli-service serve", 27 | "build": "vue-cli-service build --dest demo", 28 | "dist": "rollup -c rollup.config.js" 29 | }, 30 | "dependencies": { 31 | "rematrix": "^0.7.2" 32 | }, 33 | "devDependencies": { 34 | "@rollup/plugin-buble": "^0.21.3", 35 | "@rollup/plugin-commonjs": "^15.0.0", 36 | "@rollup/plugin-node-resolve": "^9.0.0", 37 | "@rollup/plugin-url": "^5.0.1", 38 | "@vue/cli-plugin-babel": "^4.5.13", 39 | "@vue/cli-service": "^4.3.0", 40 | "autoprefixer": "^9.5.1", 41 | "core-js": "^3.6.5", 42 | "rollup": "^1.12.5", 43 | "rollup-plugin-terser": "^5.0.0", 44 | "rollup-plugin-vue": "^5.0.0", 45 | "svgo-loader": "^2.2.1", 46 | "vue": "^2.6.11", 47 | "vue-cli-plugin-pug": "~2.0.0", 48 | "vue-material-design-icons": "^3.2.0", 49 | "vue-ribbon": "^1.0.1", 50 | "vue-template-compiler": "^2.5.21" 51 | }, 52 | "peerDependencies": { 53 | "vue": "^2.6.11" 54 | }, 55 | "postcss": { 56 | "plugins": { 57 | "autoprefixer": {} 58 | } 59 | }, 60 | "files": [ 61 | "dist", 62 | "src/components/vue-book-effects.vue", 63 | "src/vue-book-effects.js" 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/favicon.ico -------------------------------------------------------------------------------- /public/images-large/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images-large/1.jpg -------------------------------------------------------------------------------- /public/images-large/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images-large/2.jpg -------------------------------------------------------------------------------- /public/images-large/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images-large/3.jpg -------------------------------------------------------------------------------- /public/images-large/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images-large/4.jpg -------------------------------------------------------------------------------- /public/images-large/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images-large/5.jpg -------------------------------------------------------------------------------- /public/images-large/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images-large/6.jpg -------------------------------------------------------------------------------- /public/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images/1.jpg -------------------------------------------------------------------------------- /public/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images/2.jpg -------------------------------------------------------------------------------- /public/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images/3.jpg -------------------------------------------------------------------------------- /public/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images/4.jpg -------------------------------------------------------------------------------- /public/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images/5.jpg -------------------------------------------------------------------------------- /public/images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sea-DH1/vue-book-effects/2191c61bfb5b0bea2a8676308b61e03d593bc814/public/images/6.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import buble from '@rollup/plugin-buble' 2 | import resolve from '@rollup/plugin-node-resolve' 3 | import commonjs from '@rollup/plugin-commonjs' 4 | import url from '@rollup/plugin-url' 5 | import vue from 'rollup-plugin-vue' 6 | import { terser } from 'rollup-plugin-terser' 7 | import autoprefixer from 'autoprefixer' 8 | import { name, version } from './package.json' 9 | 10 | const banner = `/*! 11 | * @license 12 | * ${name} v${version} 13 | * Copyright © ${new Date().getFullYear()} Sea-DH1. 14 | * Released under the MIT License. 15 | */ 16 | ` 17 | 18 | const plugins = [ 19 | resolve({ extensions: ['.js', '.vue'] }), 20 | commonjs(), 21 | vue({ 22 | needMap: false, 23 | style: { postcssPlugins: [autoprefixer()] }, 24 | template: { isProduction: true } 25 | }), 26 | buble(), 27 | url() 28 | ] 29 | 30 | export default [ 31 | { 32 | input: 'src/components/vue-book-effects.vue', 33 | external: 'rematrix', 34 | output: [ 35 | { banner, format: 'es', file: 'dist/vue-book-effects.es.js' }, 36 | { banner, format: 'cjs', file: 'dist/vue-book-effects.cjs.js' } 37 | ], 38 | plugins 39 | }, 40 | { 41 | input: 'src/vue-book-effects.js', 42 | output: { banner, format: 'iife', file: 'dist/vue-book-effects.js' }, 43 | plugins 44 | }, 45 | { 46 | input: 'src/vue-book-effects.js', 47 | output: { banner, format: 'iife', file: 'dist/vue-book-effects.min.js' }, 48 | plugins: [...plugins, terser({ output: { comments: /copyright|license/i } })] 49 | } 50 | ] 51 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 114 | 115 | 196 | -------------------------------------------------------------------------------- /src/assets/images/spinner.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/base/js/Matrix.js: -------------------------------------------------------------------------------- 1 | import { 2 | identity, 3 | multiply, 4 | perspective, 5 | translate, 6 | translate3d, 7 | rotateY, 8 | toString 9 | } from 'rematrix' 10 | 11 | export default class Matrix { 12 | constructor(arg) { 13 | if (arg) { 14 | if (arg.m) { 15 | this.m = [].slice.call(arg.m) 16 | } else { 17 | this.m = [].slice.call(arg) 18 | } 19 | } else { 20 | this.m = identity() 21 | } 22 | } 23 | 24 | clone() { 25 | return new Matrix(this) 26 | } 27 | 28 | multiply(m) { 29 | return (this.m = multiply(this.m, m)) 30 | } 31 | 32 | perspective(d) { 33 | return this.multiply(perspective(d)) 34 | } 35 | 36 | transformX(x) { 37 | return (x * this.m[0] + this.m[12]) / (x * this.m[3] + this.m[15]) 38 | } 39 | 40 | translate(x, y) { 41 | return this.multiply(translate(x, y)) 42 | } 43 | 44 | translate3d(x, y, z) { 45 | return this.multiply(translate3d(x, y, z)) 46 | } 47 | 48 | rotateY(deg) { 49 | return this.multiply(rotateY(deg)) 50 | } 51 | 52 | toString() { 53 | return toString(this.m) 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/components/vue-book-effects.vue: -------------------------------------------------------------------------------- 1 | 99 | 100 | 1175 | 1176 | 1243 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /src/vue-book-effects.js: -------------------------------------------------------------------------------- 1 | import VueBookEffects from './components/vue-book-effects' 2 | 3 | Vue.component('vue-book-effects', VueBookEffects) 4 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: '', 3 | css: { 4 | extract: false 5 | }, 6 | chainWebpack: config => { 7 | const svgRule = config.module.rule('svg') 8 | svgRule.uses.clear() 9 | svgRule 10 | .use('url-loader') 11 | .loader('url-loader') 12 | .end() 13 | .use('svgo-loader') 14 | .loader('svgo-loader') 15 | .options({ plugins: [{ removeViewBox: false }] }) 16 | .end() 17 | }, 18 | configureWebpack: config => { 19 | if (process.env.npm_config_report) { 20 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 21 | config.plugins.push(new BundleAnalyzerPlugin()) 22 | } 23 | }, 24 | productionSourceMap: false 25 | } 26 | --------------------------------------------------------------------------------