Hallo
Ich möchte einen Counter der zum Beispiel von 0 bis 50 zählt aber erst wenn der Bereich im Viewport sichtbar ist.
Der Zähler funktioniert, startet aber sobald die Seite aufgerufen wird.
..ich möchte aber dass der Zählvorgang erst dann startet wenn das div .mycounter im Viewport auftaucht.
Das Script (jquery) für den zähler sieht so aus:
Code
jQuery( document ).ready(function( $ ) {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});Das hat leider auch nicht geholfen:
Code
jQuery( document ).ready(function( $ ) {
$(window).on('resize scroll', function() {
if ($('.mycounter').isInViewport()) {
// do something
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
} else {
// do something else
}
});
});Kann mir jemand auf die Sprünge helfen? Der Counter soll nur einmal ausgeführt werden und nicht jedes mal wenn man zu dieser Position scrollt.
Beste Grüsse
Beat
)