Add test/index.html file for easier debug on the master branch.

wwwK · Apr 12, 2019 · d3107f0 · d3107f0
1 parent 7dddcf9
commit d3107f0
Showing 1 changed file with 128 additions and 0 deletions.
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Vanilla-tilt.js</title>
+
+  <style>
+    html, body {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    a {
+      text-decoration: none;
+      color: #333;
+    }
+
+    .logo {
+      display: block;
+
+      width: 100%;
+      max-width: 200px;
+      height: 200px;
+
+      margin: 0px auto;
+      margin-top: 50px;
+
+      line-height: 200px;
+      text-align: center;
+
+      color: white;
+      font-size: 2em;
+
+      background: #0099F7; /* fallback for old browsers */
+      background: -webkit-linear-gradient(135deg, #0099F7, #F11712); /* Chrome 10-25, Safari 5.1-6 */
+      background: linear-gradient(135deg, #0099F7, #F11712); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+      -webkit-transform-style: preserve-3d;
+      transform-style: preserve-3d;
+      -webkit-transform: perspective(500px);
+      transform: perspective(500px);
+      margin-bottom: 75px;
+    }
+
+    .logo > span {
+      position: relative;
+      display: block;
+      -webkit-transform: translateZ(50px) scale(0.7);
+      transform: translateZ(50px) scale(0.7);
+    }
+
+    .logo > span:after {
+      content: "GitHub";
+      position: absolute;
+      color: white;
+      font-size: 18px;
+      top: 36px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      opacity: 0.8;
+
+      transition: 0.3s ease all;
+    }
+
+    .logo > span:before {
+      content: "View source";
+      position: absolute;
+      color: white;
+      font-size: 18px;
+      top: 36px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-10px);
+
+      opacity: 0;
+
+      display: inline-block;
+      width: 100%;
+
+      transition: 0.3s ease all;
+    }
+
+    .logo:hover > span:after {
+      opacity: 0;
+      transform: translateX(-50%) translateY(10px);
+    }
+
+    .logo:hover > span:before {
+      opacity: 0.8;
+      transform: translateX(-50%);
+    }
+
+    .logo > span > span {
+      display: block;
+      font-size: 12px;
+    }
+
+    .logo:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background-color: #333;
+      box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.7), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
+      z-index: -1;
+      -webkit-transform: translateZ(-50px);
+      transform: translateZ(-50px);
+      -webkit-transition: .3s;
+      transition: .3s;
+    }
+  </style>
+</head>
+<body>
+
+<a href="https://github.com/micku7zu/vanilla-tilt.js" class="logo" id="logo" data-tilt data-tilt-glare="true"
+   data-tilt-max-glare="0.5" data-tilt-speed="400"
+   data-tilt-scale="1.1" data-tilt-max="20" data-tilt-perspective="500">
+  <span>vanilla-tilt.js</span>
+</a>
+
+<script type="text/javascript" src="../dist/vanilla-tilt.js"></script>
+
+</body>
+</html>