renames

2017-05-25 11:56:32 +03:00 · 2017-05-25 11:56:32 +03:00 · 455d300d8d
commit 455d300d8d
parent 787d58a83f
280 changed files with 2 additions and 2 deletions
--- a/3-animation/3-js-animation/bounce.view/index.html
+++ b/3-animation/3-js-animation/bounce.view/index.html
@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
+  <script src="https://js.cx/libs/animate.js"></script>
+</head>
+
+<body>
+
+
+  <div id="path">
+    <div id="brick"></div>
+  </div>
+
+  <script>
+    brick.onclick = function() {
+      animate({
+        duration: 3000,
+        timing: function bounce(timeFraction) {
+          for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+            if (timeFraction >= (7 - 4 * a) / 11) {
+              return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+            }
+          }
+        },
+        draw: function(progress) {
+          brick.style.left = progress * 500 + 'px';
+        }
+      });
+    };
+  </script>
+
+
+</body>
+
+</html>
--- a/3-animation/3-js-animation/bounce.view/style.css
+++ b/3-animation/3-js-animation/bounce.view/style.css
@ -0,0 +1,13 @@
+#brick {
+  width: 40px;
+  height: 20px;
+  background: #EE6B47;
+  position: relative;
+  cursor: pointer;
+}
+
+#path {
+  outline: 1px solid #E8C48E;
+  width: 540px;
+  height: 20px;
+}