components

2019-04-02 14:01:44 +03:00 · 2019-04-02 14:01:44 +03:00 · 6fb4aabcba
commit 6fb4aabcba
parent 304d578b54
344 changed files with 669 additions and 406 deletions
--- a/7-animation/3-js-animation/text.view/index.html
+++ b/7-animation/3-js-animation/text.view/index.html
@ -0,0 +1,50 @@
+<!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>
+
+
+  <textarea id="textExample" rows="5" cols="60">He took his vorpal sword in hand:
+Long time the manxome foe he sought—
+So rested he by the Tumtum tree,
+And stood awhile in thought.
+  </textarea>
+
+  <button onclick="animateText(textExample)">Run the animated typing!</button>
+
+  <script>
+    function animateText(textArea) {
+      let text = textArea.value;
+      let to = text.length,
+        from = 0;
+
+      animate({
+        duration: 5000,
+        timing: bounce,
+        draw: function(progress) {
+          let result = (to - from) * progress + from;
+          textArea.value = text.substr(0, Math.ceil(result))
+        }
+      });
+    }
+
+
+    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)
+        }
+      }
+    }
+  </script>
+
+
+</body>
+
+</html>
--- a/7-animation/3-js-animation/text.view/style.css
+++ b/7-animation/3-js-animation/text.view/style.css
@ -0,0 +1,10 @@
+textarea {
+  display: block;
+  border: 1px solid #BBB;
+  color: #444;
+  font-size: 110%;
+}
+
+button {
+  margin-top: 10px;
+}