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

Using A Fixed Position

bgongre opened this issue · comments

I'm trying to use the particles.js background with a fixed position on the page so when scrolling it keeps the animation. Currently when I try to change the background position property to 'fixed' it breaks and states it cannot find clientWidth of null. If you'd like to see an example of what I am talking about please go to; http://brittanigongre.com/blockchain-demo/ and hit 'add-block' 3-4 times. Thank you for any help provided.

edit: I've also tried to add a div around the canvas element and set the div containing canvas to position: fixed, but the particles stop showing when I do that.

edit: I figured out the answer to my own question, I added a div around the canvas with a class name of 'particles' and added the following CSS:

.background {
background-color: #f9f9fb;
position: absolute;
display: block;
}

.particles {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}