2
Ich habe es geschafft, einen einfachen stat Zähler von Null bis zu einem bestimmten Wert zu bekommen, wo es nur auf Seite Scroll aktiviert ist, aber es ist nicht genau, wie ich es anstrebte.Schleife durch jQuery-Elemente getrennt und animiere auf Seite Scroll
Das Problem ist, dass alle ".counter" -Elemente gleichzeitig abfeuern, sobald das erste Element in Sicht kommt, anstatt zu warten, bis jedes einzelne Element tatsächlich auf dem Bildschirm sichtbar ist. Sobald also das Fenster auf das enthaltene div trifft, gehen alle sofort los.
Ich möchte jeden einzelnen .counter warten, bis es vollständig sichtbar ist, bevor es abfeuert.
Hier ist, was ich bisher habe:
HTML:
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="stats">
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="400"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="350"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="12"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="97"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="899"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="4"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="0"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
<div class="single-stat">
<h6 class="top-line">title</h6>
<div class="stat-container">
<h6 class="stat"><span class="counter" count="6"></span></h6>
</div>
<h6 class="bottom-line">bottom line</h6>
</div>
</div>
Und die jQuery ...
(function($) {
$(function() {
var $counters = $('.counter'); //contains all elements of counter class
var $window = $(window);
$window.on('scroll', function(e) {
$counters.each(function(i, elem) { //loop through each element
if ($(this).hasClass('counted')) // check if already animated
return;
animateCounter($(this));
});
});
});
function animateCounter(elem) {
var winTop = $(window).scrollTop(); // calculate distance from top of window
var winBottom = winTop + $(window).height();
var elemTop = $(elem).offset().top; // element distance from top of page
var elemBottom = elemTop + $(elem).height();
if ((elemBottom <= winBottom) && (elemTop >= winTop)) {
$('.counter').each(function() {
var $this = $(this);
jQuery({
Counter: 0
}).animate({
Counter: $this.attr('count')
}, {
duration: 3000,
step: function() {
$this.text(Math.ceil(this.Counter));
}
});
$this.removeClass('counter').addClass('counted');
});
}
}
})(jQuery);
Fiddle hier: https://jsfiddle.net/ahfL4jxr/11/
Danke voraus.
Ausgabe zu
$(elem)ändern (glaube ich) '$ (this)' sind alle die '.counter' Elemente und da es sich um eine Klassenauswahl ist, es wird für alle laufen. Ich werde ein wenig herumstöbern und sehen, ob ich es beheben kann. – Gezzasa
buchstäblich eine Änderung :). In meiner Antwort behoben – Gezzasa