This code make the counter/animation start when in view, but I would like for it to restart when scrolling out of view and then in view again. Can't seem to solve it.
If you would like to see it live link here - scroll down to the bottom just before the footer. https://easyrecycle.dk/Serviceomraader.html
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 3000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
a = 1;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">
<div >
<div >
<div data-count="30">0</div>
<span></span>
<p>Antal medarbejdere</p>
</div>
<div >
<div data-count="51000">0</div>
<span></span>
<p>Processeret udstyr i KG pr. md.</p>
</div>
<div >
<div data-count="51">0</div>
<span></span>
<p>Antal afhentninger pr. md.</p>
</div>
</div>
</div>CodePudding user response：
Don't use the .scroll() Event listener. It's a performance killer. Same goes for JavaScript's "scroll" EventListener - if used to perform heavy tasks. Actually you don't need jQuery at all.
Your task basically involves the use of:
- the Intersection Observer API to watch for elements entering / exiting the viewport — instead of the pretty expensive scroll listener you used
- a
counterStart()function (triggered on viewport enter) that uses requestAnimationFrame — the most performant way to handle animations on the web. - a
counterStop()function (triggered on viewport exit) that cancels the AnimationFrame and resets the element counter back to itsstartvalue. - an easing function in which you'll pass the linearly mapped time fraction (float
0.0 ... 1.0) in order to retrieve the easing value to be used to derive your integers/counters.
//gist.github.com/gre/1650294
const easeInOutQuad = (t) => t < .5 ? 2 * t * t : -1 (4 - 2 * t) * t;
const inViewportCounter = (el) => {
const duration = el.dataset.duration || 3000;
const start = el.textContent || 0;
const end = el.dataset.count || 100;
let raf;
//stackoverflow.com/a/70746179/383904
const counterStart = () => {
if (start === end) return; // If equal values, stop here.
const range = end - start;
let curr = start; // Set current to start
const timeStart = Date.now();
const loop = () => {
let elaps = Date.now() - timeStart;
if (elaps > duration) elaps = duration;
const frac = easeInOutQuad(elaps / duration); // Get the time fraction with easing
const step = frac * range; // Calculate the value step
curr = start step; // Increment or Decrement current value
el.textContent = Math.trunc(curr); // Apply to UI as integer
if (elaps < duration) raf = requestAnimationFrame(loop); // Loop
};
raf = requestAnimationFrame(loop); // Start the loop!
};
const counterStop = (el) => {
cancelAnimationFrame(raf);
el.textContent = start;
};
//stackoverflow.com/a/70746179/383904
const inViewport = (entries, observer) => {
entries.forEach(entry => {
// Enters viewport:
if (entry.isIntersecting) counterStart(entry.target);
// Exits viewport:
else counterStop(entry.target);
});
};
const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options
// Attach observer to element:
Obs.observe(el, obsOptions);
};
document.querySelectorAll('[data-count]').forEach(inViewportCounter);[data-count] { margin: 55vh 0; font: 3rem/1.4 sans-serif; }Scroll down...
<div data-count="300">0</div>
<div data-count="51000">0</div>
<div data-count="1000">0</div>For a better understanding of the above main two chunks of code head to their original base answers which I basically reused and adapted:
with the basic differences being:
- in the
counterfunction I passed the linear fraction of time into the easing function - and for the Intersection Observer one, I used an
if .. elseblock; theelseused to reset the element'stextContentback to "0" (or anystartvalue).
Sorry for not using jQuery as I probably would've years ago, but hopefully you learned something exciting and new. If some parts are not completely clear, feel always free to ask.
CodePudding user response：
As you can see from my example below, i add a simple if (if is not in view) and reset the text/variable.
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 3000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
a = 1;
} else {
$('.counter-value').text('0');
a = 0;
}
});.fakespace{
height:500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='fakespace'></div>
<div id="counter">
<div >
<div >
<div data-count="30">0</div>
<span></span>
<p>Antal medarbejdere</p>
</div>
<div >
<div data-count="51000">0</div>
<span></span>
<p>Processeret udstyr i KG pr. md.</p>
</div>
<div >
<div data-count="51">0</div>
<span></span>
<p>Antal afhentninger pr. md.</p>
</div>
</div>
</div>