renovations

2015-03-04 23:09:07 +03:00 · 2015-03-04 23:09:07 +03:00 · 951cf3f2ec
commit 951cf3f2ec
parent 05d35d0d16
152 changed files with 2527 additions and 2179 deletions
--- a/5-animation/3-js-animation/text.view/index.html
+++ b/5-animation/3-js-animation/text.view/index.html
@ -0,0 +1,49 @@
+<!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="4" cols="60">Он стал под дерево и ждет.
+И вдруг граахнул гром —
+Летит ужасный Бармаглот
+И пылкает огнем!
+</textarea>
+
+<button onclick="animateText(textExample)">Запустить анимированную печать!</button>
+
+<script>
+
+function animateText(textArea) {
+  var text = textArea.value;
+  var to = text.length, from = 0;
+  
+  animate({
+    duration: 5000,
+    timing: bounce,
+    draw: function(progress) {
+      var result = (to-from) * progress + from;
+      textArea.value = text.substr(0, Math.ceil(result))
+    }
+  });
+}
+
+
+function bounce(timeFraction) {
+  for (var 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/5-animation/3-js-animation/text.view/style.css
+++ b/5-animation/3-js-animation/text.view/style.css
@ -0,0 +1,11 @@
+
+textarea {
+  display: block;
+  border: 1px solid #BBB; 
+  color: #444;
+  font-size: 110%;
+}
+
+button {
+  margin-top: 10px;
+}