marcbruederlin / particles.js

A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.

Home Page:https://marcbruederlin.github.io/particles.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.