Optimization + demo

fluffy-factory · Jul 15, 2019 · 48d1e91 · 48d1e91
1 parent 8f605ec
commit 48d1e91
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 18 deletions.
diff --git a/docs/assets/css/demo.css b/docs/assets/css/demo.css
@@ -17,7 +17,9 @@ body {
     color: white;
     text-decoration: none;
     background-color: #0040BF;
-    transition: all .5s ease;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    transition: all .3s ease;
 }
 .magnet-mouse-active {
     background-color: #000000;

diff --git a/docs/assets/js/magnet-mouse.min.js b/docs/assets/js/magnet-mouse.min.js
diff --git a/docs/callback.html b/docs/callback.html
@@ -45,10 +45,10 @@
 
           let follow = document.querySelector(mm.config.follow.element);
 
-          follow.style.width = data.elem.width;
-          follow.style.height = data.elem.height;
-          follow.style.left = - (data.elem.width / 2);
-          follow.style.top = - (data.elem.height / 2);
+          follow.style.width = data.elem.width + 4;
+          follow.style.height = data.elem.height + 4;
+          follow.style.left = - (data.elem.width / 2) - 2;
+          follow.style.top = - (data.elem.height / 2) - 2;
 
           follow.classList.add('follow-mouse-active');
 

diff --git a/docs/fun-follow.html b/docs/fun-follow.html
@@ -15,29 +15,39 @@
             pointer-events: none;
         }
         .one {
-            z-index: 1;
+            z-index: 6;
             background-color: #ff7575;
             transition: all .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
         .two {
-            z-index: 2;
+            z-index: 5;
             background-color: #ffff75;
-            transition: all .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            transition: all .28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
         .three {
-            z-index: 2;
+            z-index: 4;
             background-color: #a0ff75;
-            transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            transition: all .40s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
         .four {
             z-index: 3;
             background-color: #5075ff;
-            transition: all .35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            transition: all .53s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
         .five {
-            z-index: 4;
+            z-index: 2;
             background-color: #a075ff;
-            transition: all .40s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            transition: all .67s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+        .six {
+            z-index: 1;
+            background-color: #ff7575;
+            transition: all .81s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+        .seven {
+            z-index: 0;
+            background-color: #ffff75;
+            transition: all .96s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
     </style>
 </head>
@@ -48,6 +58,8 @@
 <div class="follow three"></div>
 <div class="follow four"></div>
 <div class="follow five"></div>
+<div class="follow six"></div>
+<div class="follow seven"></div>
 
 <script src="assets/js/magnet-mouse.min.js"></script>
 <script>

diff --git a/docs/index.html b/docs/index.html
@@ -32,8 +32,9 @@ <h2 id="basic-usage"># Basic usage</h2>
   padding: 20px;
   border-radius: 100px;
   color: white;
-  text-decoration: none;
   background-color: #0040BF;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
   transition: all .5s ease;
 }
 .magnet-mouse-active {