¿Cómo puedo hacer un contador que cuente cada vez que se reinicia la animación? Probé el contador de segundos, pero no se sincronizó bien con mi animación. Sin embargo, estoy tratando de crear un sitio web similar a tacospin.com , pero con perro saltador. La lógica en tacospin es bastante simple, cada vez que el grado = 0 cuenta. Pero no sé cómo hacer algo así Mi código de animación:
var seconds = 0;
var el = document.getElementById('seconds-counter');
function incrementSeconds() {
seconds += 1;
el.innerText = "You have been here for " + seconds + " seconds.";
}
var cancel = setInterval(incrementSeconds, 1350);
#center{
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.centerfloor{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 193px;
width: 30%;
}
@keyframes jump {
0% {transform: translate3d(0,0,0) scale3d(1,1,1);}
40% {transform: translate3d(0,30%,0) scale3d(1,1,1);}
100% {transform: translate3d(0,100%,0) scale3d(1,1.2,1);}
}
.jump {
transform-origin: 50% 50%;
animation: jump .7s linear alternate infinite;
}
/* For demo: */
<!DOCTYPE html>
<html lang="cz">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dog jump</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div id="dogdiv">
<img class="jump" id="center" src="dogie.png" alt="idk">
</div>
<img class="centerfloor" src="floo.png">
</main>
<div id="seconds-counter"></div>
<script src="script.js"></script>
</body>
</html>
Puede confiar en el evento de iteración de animationiteration , puede vincularse a cualquier elemento DOM que esté animado a través de CSS y se activa cada vez que se repite la animación.
https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event
var seconds = 0;
let animations = 0;
let animFlag = false;
var el = document.getElementById('seconds-counter');
const el2 = document.getElementById('anims-counter');
function incrementSeconds() {
seconds += 1;
el.innerText = "You have been here for " + seconds + " seconds.";
}
var cancel = setInterval(incrementSeconds, 1350);
const animated = document.querySelector('.jump');
animated.addEventListener('animationiteration', () => {
animFlag = !animFlag
if (!animFlag) {
animations++
el2.innerText = "Animation ended. Total: " + animations
}
});
#center{
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.centerfloor{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 193px;
width: 30%;
}
@keyframes jump {
0% {transform: translate3d(0,0,0) scale3d(1,1,1);}
40% {transform: translate3d(0,30%,0) scale3d(1,1,1);}
100% {transform: translate3d(0,100%,0) scale3d(1,1.2,1);}
}
.jump {
transform-origin: 50% 50%;
animation: jump .7s linear alternate infinite;
}
/* For demo: */
<!DOCTYPE html>
<html lang="cz">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dog jump</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div id="dogdiv">
<img class="jump" id="center" src="dogie.png" alt="idk">
</div>
<img class="centerfloor" src="floo.png">
</main>
<div id="seconds-counter"></div>
<div id="anims-counter"></div>
<script src="script.js"></script>
</body>
</html>