Pause animation or canvas feature
yiziz opened this issue · comments
I'm using this library to render the background of a banner section. While I enjoy having the animated background, I'd like it to stop if I scroll past it or if the user is not actively engaging with that part of the page (i.e. mouse being over it). This should help save the user quite a bit of battery and computation power. Is there a way to stop the animation? I was considering taking an image of the canvas and swapping it, but it'd be easier if stopping the animation was a feature.
Try using add/remove class ".noDisplay" on window scroll on .
css
.noDisplay{
display:none !important;
}
jQuery
$(window).scroll(function(e){
if($(window).scrollTop>...px){
$('canvas').addClass('.displayNo')
}
else{
$('canvas').removeClass('.displayNo')
}
})
@blizzard983 Hi thanks for the tip, but I was wondering if there was a built in feature to pause the animation. The second approach would be to create an image and replace the canvas. I would like to avoid this if possible.