infinite vertical scroll on a non-image div

Question

I'm using a library called ParticlesJS for part of the background of my website - this library dynamically generates a canvas element sized according to its parent, and fills it with animated particle effects, creating a neat effect. With that said, I have run into some practical issues when trying to use it as the background:

1. If the canvas element is the same size as the content, the visuals become pixelated and distorted if the height changes, such as with the addition of new content. Reloading the library is not a solution to this as it creates a visually distracting effect.
2. If the canvas element is an arbitrary extreme height and not sized according to the content (with the overflow simply hidden), the performance of the website suffers, as the library consumes excessive CPU power.
3. If the canvas element is simply given a fixed position in CSS, performance is good and it sticks, but it looks out of place as everything behind it moves during scrolling.

After some consideration, it seems like the best way to make it work is to give it a modest size (like 200% page height), and then make it repeat infinitely during scrolling - performance would be acceptable, and there wouldn't be any distortion. However, I can't find any way to do this - I'm aware that there's a background-repeat property in CSS, but that seems to only work for images.

Is there any way to do what I'm trying to accomplish? Both CSS and JS based answers are welcome.

Answer 1

After some trial and error, it looks like the only means of accomplishing what I'm trying to do is as follows:

1. Create 3 or so background divs, each the size of the view port, and stack them vertically
2. Record user scrolling activity, and set a trigger for when a user has scrolled a height equal to the height of the view port
3. when the trigger is hit, place the div that just left the view port at the end of the list, and insert an empty spacer div where it used to be

If done correctly, this creates an effect where the user is apparently scrolling through an infinite background, when it's really just the same 3 or so divs being shuffled over and over. Going in reverse is the same principle.

Not sure how to make this work with in a system that also has scroll position restoration, but it could probably be done by waiting for page loads and then dynamically inserting enough spacers to move the background divs to the appropriate position in the view port.

Answer 2

The downside to using animated effects that rely on viewport dimensions is that the user may resize the browser and wreck your animation so you have no choice but to catch any viewport resizing in which case you may have to reload everything or recalculate!

You can't have the cake and the cherry on top unfortunately, so you'll either have to abandon the idea of "impressive effects" because they are impractical or take action...

document.body.onresize=function(){Adjustments();};


function Adjustments(){

 var W=Container.offsetWidth, H=Container.offsetHeight;


 // You've now got the new resolution so go for your life!

 }