estoy usando el plugin CounterUp2 para animar unos numeros cuando se haga scroll. El problema es que solo se anima el primero de ellos a pesar de tener todos la misma clase. No encuentro mucha información al respecto. He seguido la página oficial de github y un codepen que he encontrado. Con la versión anterior del plugin consigo animar todos a la vez, pero cuando hago scroll de nuevo los números finales no son correctos, algo bastante extraño lo cual hace que tampoco me valga esa versión. Muchas gracias de antemano.
Saludos,
Pedro
$(document).ready(function() {
const counterUp = window.counterUp.default
const callback = entries => {
entries.forEach( entry => {
const el = entry.target
if ( entry.isIntersecting && ! el.classList.contains( 'is-visible' ) ) {
counterUp( el, {
duration: 2000,
delay: 16,
} )
el.classList.add( 'is-visible' )
}
} )
}
const IO = new IntersectionObserver( callback, { threshold: 1 } )
const el = document.querySelector( '.counter' )
IO.observe( el )
});
/* estilos generales */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
scroll-behavior: smooth;
font-family: itc-avant-garde-gothic-pro, sans-serif;
font-weight: 300;
font-style: normal;
}
h1, h2, h3, h4, h5 {
font-weight: 500;
color: #002456;
line-height: 1.5rem;
}
/* estilos index */
#separador{
height: 150vh;
}
.contador {
width: 80%;
height: 33vh;
background-color: #002456;
margin: 8.3vh auto;
display: flex;
justify-content: space-evenly;
}
.contador>div {
width: 25%;
margin-top: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.numero, .unidad {
color: white;
}
.numero {
font-size: 42pt;
font-weight: 500;
}
.unidad {
margin-top: 1rem;
width: 100%;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contador</title>
<link rel="stylesheet" href="https://use.typekit.net/mht7chq.css">
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<section id="separador">
<h1>Haz scroll</h1>
</section>
<section class="contador">
<div>
<h3 class="numero counter">50</h3>
<h4 class="unidad">PROYECTOS</h4>
</div>
<div>
<h3 class="numero counter">500</h3>
<h4 class="unidad">PROYECTOS</h4>
</div>
<div>
<h3 class="numero counter">5000</h3>
<h4 class="unidad">PROYECTOS</h4>
</div>
<div>
<h3 class="numero counter">8000</h3>
<h4 class="unidad">PROYECTOS</h4>
</div>
</section>
</body>
</html>