modify: axial3d props

bestvist · Oct 30, 2018 · ef944f8 · ef944f8
1 parent 5306556
commit ef944f8
Show file tree

Hide file tree

Showing 14 changed files with 205 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ or
 ```
 
 ## 例子 Example
-[Demo](https://bestvist.github.io/axial3d/demo.html)
+[Demo](https://bestvist.github.io/axial3d/demo/)
 
 ```
 <html>
@@ -48,14 +48,16 @@ or
 
 ### options
 
-| 属性 | 描述 | 类型 | 可选值 | 默认 |
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
 |-|-|-|-|-|
 | selector | 元素选择器 | String | - | - |
 | imgs | 图片组 | Array | - | - |
+| transform | 动画形式 | String | translate / rotate | translate |
+| swing | 动画幅度 | Number | - | 5 |
 
 ### imgs options
 
-| 属性 | 描述 | 类型 | 可选值 | 默认 |
+| 属性 | 说明 | 类型 | 可选值 | 默认值 |
 |-|-|-|-|-|
 | src | 图像路径 | String | - | - |
 | top | 图片顶部定位 | String | - | - |
@@ -64,6 +66,12 @@ or
 | right | 图片右侧定位 | String | - | - |
 | static | 图片是否静态，不随鼠标转动 | Boolean | true / false | false |
 
+## 方法 Methods
+
+| 事件名称 | 说明 | 回调参数 |
+|-|-|-|
+| destory | 取消事件监听 | - |
+
 
 ## License
 

diff --git a/demo.html b/demo.html
diff --git a/demo/index.css b/demo/index.css
@@ -0,0 +1,82 @@
+body {
+    margin: 0;
+}
+
+code {
+    display: block;
+    padding: 8px 15px;
+    background-color: #f6f8fa;
+    border-radius: 5px;
+    border: 1px solid #e5e5e5;
+    overflow-x: auto;
+    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    color: #333;
+    font-size: 12px;
+}
+
+p,
+ul,
+ol,
+table,
+pre,
+dl {
+    margin: 0 0 20px;
+}
+
+h1 {
+    color: #555555;
+    font-size: 60px;
+    text-align: center
+}
+
+h3 {
+    font-size: 36px;
+    color: #494949;
+    line-height: 1.1;
+}
+
+.github-corner:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+
+    0%,
+    100% {
+        transform: rotate(0)
+    }
+
+    20%,
+    60% {
+        transform: rotate(-25deg)
+    }
+
+    40%,
+    80% {
+        transform: rotate(10deg)
+    }
+}
+
+@media (max-width:500px) {
+    .github-corner:hover .octo-arm {
+        animation: none
+    }
+
+    .github-corner .octo-arm {
+        animation: octocat-wave 560ms ease-in-out
+    }
+}
+
+#app {
+    margin: 20px;
+}
+
+.container {
+    width: 980px;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.panel {
+    text-align: center;
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>轴动效果 - 类似Github 404</title>
+    <link rel="stylesheet" href="./index.css">
+    <script src="../dist/axial3d.min.js"></script>
+</head>
+
+<body>
+
+    <a href="https://github.com/bestvist/axial3d" class="github-corner" aria-label="View source on Github">
+        <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#4AB7BD; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
+            aria-hidden="true">
+            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+            <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+            fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+            <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+            fill="currentColor" class="octo-body"></path>
+        </svg>
+    </a>
+
+    <div id="app">
+        <h1>轴动效果 Axial3d</h1>
+        <div class="container">
+            <h3>3D变换</h3>
+            <div class="panel">
+                <div id="axial3d-github" style="min-height: 500px"></div>
+
+                <pre>
+                    <code>
+
+                    </code>
+                </pre>
+            </div>
+            <h3>旋转变换</h3>
+            <div class="panel">
+                <div id="axial3d-images" style="min-height: 500px"></div>
+
+                <pre>
+                    <code>
+
+                    </code>
+                </pre>
+            </div>
+        </div>
+
+    </div>
+
+    <script>
+        (function () {
+            var option1 = {
+                selector: '#axial3d-github',
+                imgs: [
+                    { src: '../public/github/bg.png', left: '0', top: '0' },
+                    { src:'../public/github/house1.png', left: '480px', top: '70px', zIndex: 4 },
+                    { src:'../public/github/house2.png', left: '790px',top: '120px', zIndex: 4 },
+                    { src:'../public/github/ship-shadow.png', left: '440px', top: '250px', zIndex: 6 },
+                    { src:'../public/github/ship.png', left: '430px', top: '140px', zIndex: 6 },
+                    { src:'../public/github/cat-shadow.png', left: '360px', top: '290px', zIndex: 7 },
+                    { src:'../public/github/cat.png', left: '350px', top: '90px', zIndex: 7 },
+                ]
+            }
+            var effect1 = new Axial3d(option1);
+
+            var option2 = {
+                selector: '#axial3d-images',
+                transform: 'rotate',
+                imgs: [
+                    { src: '../public/images/1.png',left: '50px',top: '10px' },
+                    { src:'../public/images/2.png',left: '150px',top: '10px',static: true },
+                    { src:'../public/images/3.png',left: '50px',top: '300px',static: true },
+                    { src:'../public/images/4.png',left: '300px',top: '300px',static: true }
+                ]
+            }
+            var effect2 = new Axial3d(option2);
+
+        })()
+    </script>
+</body>
+
+</html>
diff --git a/dist/axial3d.min.js b/dist/axial3d.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "axial3d",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "3D effect page like github404",
   "main": "dist/axial3d.min.js",
   "scripts": {

diff --git a/public/github/bg.png b/public/github/bg.png
diff --git a/public/github/cat-shadow.png b/public/github/cat-shadow.png
diff --git a/public/github/cat.png b/public/github/cat.png
diff --git a/public/github/house1.png b/public/github/house1.png
diff --git a/public/github/house2.png b/public/github/house2.png
diff --git a/public/github/ship-shadow.png b/public/github/ship-shadow.png
diff --git a/public/github/ship.png b/public/github/ship.png
diff --git a/src/axial3d.js b/src/axial3d.js
@@ -3,15 +3,16 @@ export default class Axial3d {
         this.options = options || {};
         this.$el = document.querySelector(options.selector);
         this.point = {};
-        this.rate = 0.02;
-        this.setPosition();
+        this.transform = options.transform || 'translate';
+        this.swing = options.swing || 5;
+        this.setPoint();
         this.render();
 
         this.moveFunc = this.move.bind(this);
         document.addEventListener('mousemove', this.moveFunc);
     }
 
-    setPosition(){
+    setPoint() {
         const rect = this.$el.getBoundingClientRect();
         const x = (rect.right - rect.left) / 2;
         const y = (rect.bottom - rect.top) / 2;
@@ -22,38 +23,44 @@ export default class Axial3d {
     }
 
     render() {
-        if(!this.options.imgs){
-            throw Error('axial3d options missing imgs attributes!');
+        if (!this.options.imgs) {
+            throw Error('Axial3d options missing imgs attributes!');
         }
 
-        this.$el.style = 'position:relative;perspective: 800px;';
-        this.options.imgs.forEach((img, index) => {
+        this.$el.style['position'] = 'relative';
+        this.$el.style['perspective'] = '800px';
+
+        this.options.imgs.forEach(img => {
+            img.id = 'axial3d-' + Math.floor(+new Date() * Math.random());
             const $imgs = document.createElement('img');
-            $imgs.id = `axial3d-${index}`;
+            $imgs.setAttribute(img.id,true);
             $imgs.src = img.src;
             $imgs.style.position = 'absolute';
-            $imgs.style['transform'] = 'rotatey(0deg)';
-            ['left', 'top', 'right', 'bottom'].forEach(d => {
+            ['left', 'top', 'right', 'bottom', 'zIndex'].forEach(d => {
                 $imgs.style[d] = img[d];
             });
             this.$el.appendChild($imgs);
         });
     }
 
     move(e) {
-        const {pageX, pageY} = e;
-        this.options.imgs.forEach((img, index) => {
-            if(img.static) return;
+        const { pageX, pageY } = e;
+        this.options.imgs.forEach(img => {
+            if (img.static) return;
 
-            const $img = document.querySelector("#axial3d-" + index);
-            const rotatex = (pageX - this.point.x) * this.rate;
-            const rotatey = (pageY - this.point.y) * this.rate;
+            const $img = document.querySelector(`[${img.id}]`);
+            const rotatex = (pageX - this.point.x) * this.swing / 1000 * (img.zIndex || 1);
+            const rotatey = (pageY - this.point.y) * this.swing / 1000 * (img.zIndex || 1);
 
-            $img.style['transform'] = `rotatey(${rotatex}deg) rotatex(${rotatey}deg)`;
+            if (this.transform === 'translate') {
+                $img.style['transform'] = `translate3d(${rotatex}px,${rotatey}px,0px)`;
+            } else if (this.transform === 'rotate') {
+                $img.style['transform'] = `rotatey(${rotatex}deg) rotatex(${rotatey}deg)`;
+            }
         });
     }
 
-    destory(){
+    destory() {
         document.removeEventListener('mousemove', this.moveFunc);
     }
 }