Плавное падение перышка на JavaScript
Интересный эффект плавного падения перышка на JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Плавное падение перышка</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#perishko {
position: absolute;
right: 125px;
top: 0px;
}
</style>
</head>
<body>
<img id="perishko" src="images/perishko.png" alt=""/>
<script>
var countNN1=0;
var LFT1=1;
var DEGA2 = 0;
var DegaT2 = 1;
perishko.onclick = function() {
animate({
duration: 8000,
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) {
perishko.style.top = 50+progress * 260 + 'px';
perishko.style.right = 50+progress * 300 + 'px';
if (DEGA2 >= 75){
DegaT2 = 0;
}
if (DEGA2 <= 5) {
DegaT2 = 1;
}
if (DegaT2 == 1) {
DEGA2++;
} else {
DEGA2--;
}
perishko.style.transform = "rotate("+DEGA2+"deg)";
}
});
};
function animate({timing, draw, duration}) {
let start = performance.now();
requestAnimationFrame(function animate(time) {
// timeFraction goes from 0 to 1
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
// calculate the current animation state
let progress = timing(timeFraction);
draw(progress); // draw it
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
});
}
</script>
</body>
</html>
See the Pen Плавное падение перышка на JavaScript by Stepan (@design4uruinfo) on CodePen.0
