beautify html
This commit is contained in:
Ilya Kantor
parent
ecf1478e7e
commit
5342f628da
354 changed files with 13965 additions and 9486 deletions
|
|
@ -1,50 +1,51 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="https://js.cx/libs/animate.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
|
||||
</div>
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
function makeEaseOut(timing) {
|
||||
return function(timeFraction) {
|
||||
return 1 - timing(1 - timeFraction);
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
function makeEaseOut(timing) {
|
||||
return function(timeFraction) {
|
||||
return 1 - timing(1 - timeFraction);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ball.onclick = function() {
|
||||
|
||||
var to = field.clientHeight - ball.clientHeight;
|
||||
|
||||
animate({
|
||||
duration: 2000,
|
||||
timing: makeEaseOut(bounce),
|
||||
draw: function(progress) {
|
||||
ball.style.top = to*progress + 'px'
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ball.onclick = function() {
|
||||
|
||||
var to = field.clientHeight - ball.clientHeight;
|
||||
|
||||
animate({
|
||||
duration: 2000,
|
||||
timing: makeEaseOut(bounce),
|
||||
draw: function(progress) {
|
||||
ball.style.top = to * progress + 'px'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,16 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="https://js.cx/libs/animate.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://js.cx/libs/animate.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
|
||||
</div>
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,59 +1,61 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="https://js.cx/libs/animate.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://js.cx/libs/animate.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
|
||||
</div>
|
||||
<div id="field">
|
||||
<img src="https://js.cx/clipart/ball.svg" width="40" height="40" id="ball">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function makeEaseOut(timing) {
|
||||
return function(timeFraction) {
|
||||
return 1 - timing(1 - timeFraction);
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
function makeEaseOut(timing) {
|
||||
return function(timeFraction) {
|
||||
return 1 - timing(1 - timeFraction);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function quad(timeFraction) {
|
||||
return Math.pow(timeFraction, 2);
|
||||
}
|
||||
|
||||
ball.onclick = function() {
|
||||
|
||||
var height = field.clientHeight - ball.clientHeight;
|
||||
var width = 100;
|
||||
|
||||
animate({
|
||||
duration: 2000,
|
||||
timing: makeEaseOut(bounce),
|
||||
draw: function(progress) {
|
||||
ball.style.top = height*progress + 'px'
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
animate({
|
||||
duration: 2000,
|
||||
timing: makeEaseOut(quad),
|
||||
draw: function(progress) {
|
||||
ball.style.left = width*progress + "px"
|
||||
function quad(timeFraction) {
|
||||
return Math.pow(timeFraction, 2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
ball.onclick = function() {
|
||||
|
||||
var height = field.clientHeight - ball.clientHeight;
|
||||
var width = 100;
|
||||
|
||||
animate({
|
||||
duration: 2000,
|
||||
timing: makeEaseOut(bounce),
|
||||
draw: function(progress) {
|
||||
ball.style.top = height * progress + 'px'
|
||||
}
|
||||
});
|
||||
|
||||
animate({
|
||||
duration: 2000,
|
||||
timing: makeEaseOut(quad),
|
||||
draw: function(progress) {
|
||||
ball.style.left = width * progress + "px"
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,33 +1,34 @@
|
|||
<!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>
|
||||
<div id="path">
|
||||
<div id="brick"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function back(x, timeFraction) {
|
||||
return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x)
|
||||
}.bind(null, 1.5),
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<script>
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function back(x, timeFraction) {
|
||||
return Math.pow(timeFraction, 2) * ((x + 1) * timeFraction - x)
|
||||
}.bind(null, 1.5),
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,50 +1,52 @@
|
|||
<!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>
|
||||
<div id="path">
|
||||
<div id="brick"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function makeEaseInOut(timing) {
|
||||
return function(timeFraction) {
|
||||
if (timeFraction < .5)
|
||||
return timing(2*timeFraction) / 2;
|
||||
else
|
||||
return (2 - timing(2*(1-timeFraction))) / 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>
|
||||
function makeEaseInOut(timing) {
|
||||
return function(timeFraction) {
|
||||
if (timeFraction < .5)
|
||||
return timing(2 * timeFraction) / 2;
|
||||
else
|
||||
return (2 - timing(2 * (1 - timeFraction))) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var bounceEaseInOut = makeEaseInOut(bounce);
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 3000,
|
||||
timing: bounceEaseInOut,
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
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>
|
||||
var bounceEaseInOut = makeEaseInOut(bounce);
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 3000,
|
||||
timing: bounceEaseInOut,
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,46 +1,48 @@
|
|||
<!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>
|
||||
<div id="path">
|
||||
<div id="brick"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function makeEaseOut(timing) {
|
||||
return function(timeFraction) {
|
||||
return 1 - timing(1 - timeFraction);
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
function makeEaseOut(timing) {
|
||||
return function(timeFraction) {
|
||||
return 1 - timing(1 - timeFraction);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var bounceEaseOut = makeEaseOut(bounce);
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 3000,
|
||||
timing: bounceEaseOut,
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
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>
|
||||
var bounceEaseOut = makeEaseOut(bounce);
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 3000,
|
||||
timing: bounceEaseOut,
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,37 +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>
|
||||
<div id="path">
|
||||
<div id="brick"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 3000,
|
||||
timing: 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>
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 3000,
|
||||
timing: 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)
|
||||
}
|
||||
}
|
||||
},
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
}
|
||||
},
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,33 +1,34 @@
|
|||
<!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>
|
||||
<div id="path">
|
||||
<div id="brick"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function circ(timeFraction) {
|
||||
return 1 - Math.sin(Math.acos(timeFraction))
|
||||
},
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<script>
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function circ(timeFraction) {
|
||||
return 1 - Math.sin(Math.acos(timeFraction))
|
||||
},
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,33 +1,34 @@
|
|||
<!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>
|
||||
<div id="path">
|
||||
<div id="brick"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 3000,
|
||||
timing: function elastic(x, timeFraction) {
|
||||
return Math.pow(2, 10 * (timeFraction-1)) * Math.cos(20*Math.PI*x/3*timeFraction)
|
||||
}.bind(null, 1.5),
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<script>
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 3000,
|
||||
timing: function elastic(x, timeFraction) {
|
||||
return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction)
|
||||
}.bind(null, 1.5),
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,51 +1,53 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
#train {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
#train {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img id="train" src="https://js.cx/clipart/train.gif">
|
||||
|
||||
<img id="train" src="https://js.cx/clipart/train.gif">
|
||||
|
||||
<script>
|
||||
|
||||
train.onclick = function() {
|
||||
animate(function(timePassed) {
|
||||
train.style.left = timePassed / 5 + 'px';
|
||||
}, 2000);
|
||||
};
|
||||
<script>
|
||||
train.onclick = function() {
|
||||
animate(function(timePassed) {
|
||||
train.style.left = timePassed / 5 + 'px';
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// Рисует функция draw
|
||||
// Продолжительность анимации duration
|
||||
function animate(draw, duration) {
|
||||
var start = performance.now();
|
||||
// Рисует функция draw
|
||||
// Продолжительность анимации duration
|
||||
function animate(draw, duration) {
|
||||
var start = performance.now();
|
||||
|
||||
requestAnimationFrame(function animate(time) {
|
||||
// определить, сколько прошло времени с начала анимации
|
||||
var timePassed = time - start;
|
||||
requestAnimationFrame(function animate(time) {
|
||||
// определить, сколько прошло времени с начала анимации
|
||||
var timePassed = time - start;
|
||||
|
||||
console.log(time, start)
|
||||
// возможно небольшое превышение времени, в этом случае зафиксировать конец
|
||||
if (timePassed > duration) timePassed = duration;
|
||||
console.log(time, start)
|
||||
// возможно небольшое превышение времени, в этом случае зафиксировать конец
|
||||
if (timePassed > duration) timePassed = duration;
|
||||
|
||||
// нарисовать состояние анимации в момент timePassed
|
||||
draw(timePassed);
|
||||
// нарисовать состояние анимации в момент timePassed
|
||||
draw(timePassed);
|
||||
|
||||
// если время анимации не закончилось - запланировать ещё кадр
|
||||
if (timePassed < duration) {
|
||||
requestAnimationFrame(animate);
|
||||
// если время анимации не закончилось - запланировать ещё кадр
|
||||
if (timePassed < duration) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,35 +1,37 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
#train {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
#train {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<img id="train" src="https://js.cx/clipart/train.gif">
|
||||
|
||||
<img id="train" src="https://js.cx/clipart/train.gif">
|
||||
|
||||
<script>
|
||||
|
||||
train.onclick = function() {
|
||||
var start = Date.now(); // сохранить время начала
|
||||
<script>
|
||||
train.onclick = function() {
|
||||
var start = Date.now(); // сохранить время начала
|
||||
|
||||
var timer = setInterval(function() {
|
||||
// вычислить сколько времени прошло из opts.duration
|
||||
var timePassed = Date.now() - start;
|
||||
var timer = setInterval(function() {
|
||||
// вычислить сколько времени прошло из opts.duration
|
||||
var timePassed = Date.now() - start;
|
||||
|
||||
train.style.left = timePassed / 5 + 'px';
|
||||
train.style.left = timePassed / 5 + 'px';
|
||||
|
||||
if (timePassed > 2000) clearInterval(timer);
|
||||
if (timePassed > 2000) clearInterval(timer);
|
||||
|
||||
}, 20);
|
||||
}
|
||||
</script>
|
||||
}, 20);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,33 +1,34 @@
|
|||
<!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>
|
||||
<div id="path">
|
||||
<div id="brick"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function(timeFraction) {
|
||||
return Math.pow(timeFraction, 2);
|
||||
},
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<script>
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function(timeFraction) {
|
||||
return Math.pow(timeFraction, 2);
|
||||
},
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,33 +1,34 @@
|
|||
<!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>
|
||||
<div id="path">
|
||||
<div id="brick"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function(timeFraction) {
|
||||
return Math.pow(timeFraction, 5);
|
||||
},
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<script>
|
||||
brick.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function(timeFraction) {
|
||||
return Math.pow(timeFraction, 5);
|
||||
},
|
||||
draw: function(progress) {
|
||||
brick.style.left = progress * 500 + 'px';
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
|
@ -9,28 +10,27 @@
|
|||
</style>
|
||||
<script src="animate.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<progress id="elem"></progress>
|
||||
<progress id="elem"></progress>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
elem.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function(timeFraction) {
|
||||
return timeFraction;
|
||||
},
|
||||
draw: function(progress) {
|
||||
elem.style.width = progress * 100 + '%';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<script>
|
||||
elem.onclick = function() {
|
||||
animate({
|
||||
duration: 1000,
|
||||
timing: function(timeFraction) {
|
||||
return timeFraction;
|
||||
},
|
||||
draw: function(progress) {
|
||||
elem.style.width = progress * 100 + '%';
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue