1

Me encontre este ejemplo de contador y mi duda es como hacer que ese ejemplo de contador inicie al hacer scroll

JSfiddle

$.fn.jQuerySimpleCounter = function( options ) {
      var settings = $.extend({
          start:  0,
          end:    100,
          easing: 'swing',
          duration: 400,
          complete: ''
      }, options );

      var thisElement = $(this);

      $({count: settings.start}).animate({count: settings.end}, {
      duration: settings.duration,
      easing: settings.easing,
      step: function() {
        var mathCount = Math.ceil(this.count);
        thisElement.text(mathCount);
      },
      complete: settings.complete
    });
  };


$('#number1').jQuerySimpleCounter({end: 450,duration: 3000});
$('#number2').jQuerySimpleCounter({end: 20,duration: 3000});
$('#number3').jQuerySimpleCounter({end: 700,duration: 2000});
$('#number4').jQuerySimpleCounter({end: 8,duration: 2500});

1 respuesta 1

0

Lo que puedes usar es el evento de JQuery llamado scroll(), para detectar el scroll de tu ventana, y pues solo necesitas después comparar la posición de tu scroll con la posición de tu div principal del contador y ejecutarlo:

$.fn.jQuerySimpleCounter = function( options ) {
      var settings = $.extend({
          start:  0,
          end:    100,
          easing: 'swing',
          duration: 400,
          complete: ''
      }, options );

      var thisElement = $(this);

      $({count: settings.start}).animate({count: settings.end}, {
      duration: settings.duration,
      easing: settings.easing,
      step: function() {
        var mathCount = Math.ceil(this.count);
        thisElement.text(mathCount);
      },
      complete: settings.complete
    });
  };
  var seEjecuto = 0;
 $(window).scroll(function() {
 if ($(this).scrollTop() >= $("#projectFacts").position().top && seEjecuto === 0) {
 	seEjecuto = 1;
  $('#number1').jQuerySimpleCounter({start: 0,end: 450,duration: 3000});
  $('#number2').jQuerySimpleCounter({start: 0,end: 20,duration: 3000});
  $('#number3').jQuerySimpleCounter({start: 0,end: 700,duration: 2000});
  $('#number4').jQuerySimpleCounter({start: 0,end: 8,duration: 2500});
}
});
.fullwidth {
  width: 100% !important;
  display: table;
  float: none;
  padding: 0;
  min-height: 1px;
  height: 100%;
  position: relative;
}
#projectFacts .fullwidth{
  padding: 0;
}
.factswrap{
    display: flex;
  margin-top: 30px;
  flex-direction: row;
  flex-wrap: wrap;
}
.factswrap .item{
  width: 25%;
  height: 100%;
  padding: 50px 0px;
  text-align: center;
  transition:  all .5s ease-in-out;
}
.factswrap .item:nth-child(1){
  background: #004b87;
}
.factswrap .item:nth-child(2){
  background: #175b91;
}
.factswrap .item:nth-child(3){
  background: #004b87;
}
.factswrap .item:nth-child(4){
  background: #175b91;
}
.factswrap .item p.number{
  font-size: 40px;
  padding: 0;
  font-weight: bold;
}
.factswrap .item p{
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans';
  font-weight: bold;
  transition:  all .5s ease-in-out;
}
.factswrap .item span.Line-under{
  width: 60px;
  background: rgba(255, 255, 255, 0.8);
  height: 2px;
  display: block;
  margin: 0 auto;
  transition:  all .5s ease-in-out;
}
.factswrap .item img{
    width: 80px;
    opacity: .8;
    transition:  all .5s ease-in-out;
}
.factswrap .item:hover img, .factswrap .item:hover p{
  color: #fff;
  opacity: 1;
}

.factswrap .item:hover span{
  background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div id="projectFacts" class="sectionClass">
  <div class="fullwidth height columns">
    <div class="factswrap" onscroll="myFunction()">
      <div class="item fadeupbig animated animated" data-number="450" style="visibility: visible;">
        <img src="img/networking.png" alt="">
        <p id="number1" class="number">0</p>
        <span class="Line-under"></span>
        <p>Lorem</p>
      </div>
      <div class="item fadeupbig animated animated" data-number="20" style="visibility: visible;">
        <img src="img/portfolio.png" alt="">
        <p id="number2" class="number">0</p>
        <span class="Line-under"></span>
        <p>Lorem</p>
      </div>
      <div class="item fadeupbig animated animated" data-number="700" style="visibility: visible;">
        <img src="img/handshake.png" alt="">
        <p id="number3" class="number">0</p>
        <span class="Line-under"></span>
        <p>Lorem</p>
      </div>
      <div class="item fadeupbig animated animated" data-number="8" style="visibility: visible;">
        <img src="img/company.png" alt="">
        <p id="number4" class="number">0</p>
        <span class="Line-under"></span>
        <p>Lorem</p>
      </div>                  
    </div>
  </div>
</div>
<div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>

Nota: La variable seEjecuto, la uso para validar que el contador solo se ejecute una vez.

Tu Respuesta

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

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