0

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>

1
  • Cosas que pasan al usar librerias de terceros
    – user227086
    el 1 jun. 2022 a las 13:23

1 respuesta 1

1

Estas consultando solo un elemento, debes consultar todos usando querySelectorAll y asignando el observer a cada uno.

$(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 els = document.querySelectorAll( '.counter' ) //Cambio

els.forEach(el => IO.observe( el )) //Cambio


});
/* 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.