jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

beautify html

Browse source
This commit is contained in:
Ilya Kantor 2015-03-09 19:02:13 +03:00
parent ecf1478e7e
commit 5342f628da
354 changed files with 13965 additions and 9486 deletions
Download patch file Download diff file Expand all files Collapse all files

54
5-animation/3-js-animation/text.view/index.html
View file

@ -1,49 +1,47 @@
<!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>
<textarea id="textExample" rows="4" cols="60">Он стал под дерево и ждет. И вдруг граахнул гром — Летит ужасный Бармаглот И пылкает огнем!
</textarea>
<button onclick="animateText(textExample)">Запустить анимированную печать!</button>
<button onclick="animateText(textExample)">Запустить анимированную печать!</button>
<script>
<script>
function animateText(textArea) {
var text = textArea.value;
var to = text.length,
from = 0;
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))
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)
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>
</script>
</body>
</html>