marcbruederlin / particles.js Goto Github PK

Doesn't seem to work when required or imported.

Seems like module.exports is missing and its relying on global variables instead?

Right now particles are just deleted when they hit an edge of the canvas and this just doesnt look nice in all situations. There should be an option to allow for bouncing when hitting canvas bounds.

With a simple change the canvas can be limited to the container, even the body, when it's used as a background, e.g. in a header element.

canvas.width = canvas.parentNode.offsetWidth;
canvas.height = canvas.parentNode.offsetHeight;

If it's ok for you, I can try to submit a PR.

I'm trying to pause animation with

  var particles = Particles.init({
         // options
       });
  particles.pauseAnimation();

however particles is undefined
the partcicles keep moving/animating

Hi! i like your plugin. Is possible add some action on click or hover? thanks.

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.

is there a way to make the canvas resize after the page updated with an ajax call?

Cannot read property 'r' of null when color is short notation "#fff"

Particles.init({
selector: '.background',
color: '#fff',
connectParticles: true,
})

It works with #ffffff only

I used this in a recent client project, and they sent me screenshots of some wonkiness in Edge? maybe something worth checking out?

Hi Marc! Thanks for the amazing plugin. In Chrome and Safari I get this error message in console, but in Firefox works fine.

TypeError: null is not an object (evaluating 'o.element.offsetParent.clientWidth')

I followed your example codes but I can't make it work.
I'm using Wordpress and Jquery

SVG is better than canvas.

The color option is actually not optional (v2.0.1). An error appear if it's not defined: Uncaught TypeError: Cannot read property 'r' of null

noticed my web app is showing lighter lines/no lines on the polygons and same issue seems to be appear on the particlesjs page: https://marcbruederlin.github.io/particles.js/

Hi!
Particle.JS doesn't work for me on mobile...
It works on the Desktop etc. and in the Dev Console at every width.

My Config:

// PARTICLE JS window.onload = function () { Particles.init({ selector: '.background', connectParticles: true, color: [ '#C8F7C5', '#1BBc9B', '#049372', '#D2527F' ], sizeVariations: 3, responsive: [ { breakpoint: 768, options: { maxParticles: 200, connectParticles: true, color: [ '#C8F7C5', '#1BBc9B', '#049372', '#D2527F' ], } }, { breakpoint: 425, options: { maxParticles: 100, connectParticles: true, color: [ '#C8F7C5', '#1BBc9B', '#049372', '#D2527F' ], } }, { breakpoint: 320, options: { maxParticles: 100, connectParticles: true, color: [ '#C8F7C5', '#1BBc9B', '#049372', '#D2527F' ], } } ] }); };

Where can I find the code for the demo picture in the readme?

There's a way to change de edge size variations, but there's no way do it with the connect lines.
Would be nice to add this config in this package.

So I have Particles on my website for looks. I remeber updating to IOS 12 then going on my website and noticed it was extremely laggy. Only on mobile safari though. I tried multiple different browser on desktop they all seem to run smoothly. Anything running safari on ios 12 it tweaks.

I have done nothing really that special with it just initializing particles:
Particles.init({ selector: '.callout_canvas', connectParticles: true, maxParticles: 50, minDistance: 115, speed: 0.28, color: '#ffffff' });

Let me know what information you may need to help you fix this.

Detect the device pixel ratio and scale the canvas element to prevent blurry drawings.

Current: The code inside particle is to create a canvas with 100% width and height.
Expected: Allow to use custom value for the canvas width and height.

I wanted to create a small-bottom-only particle background, this is why i need custom height values. I'd gladly work on it and create pull request if needed.

When I load the script on a mobile device with Google Chrome (I've not tested on other browsers) the particles are squeezed on top.

But after a change of resolution (without reloading the page):

The code in the page:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
  </head>
  <body>

    <style>
    .background {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: -1;
      background-color: #222;
    }
    </style>

    <canvas class="background"></canvas>
    <script src="scripts/particles.min.js"></script>
    <script>
      window.onload = function() {
        Particles.init({
          maxParticles: 50,
          selector: '.background',
          color: '#ffffff',
          connectParticles: true,
        });
      };
    </script>
  </body>
</html>

Is there a way to update the particles object?
I want update color after click on button , I need update method

Dear, how can I apply the particles and more than 1 backgroud?
I tried in many ways, but this was the closest I could get, but only one executes. The other carries the particles, but they stand still.
I'm sorry for my english.

<canvas class="via-bg-bg-referencia">
<canvas class="via-bg-indicadores-sucesso">
window.onload=function() { var indicadores = Particles.init({ selector: '.via-bg-indicadores-sucesso', color: '#ef8a4e', maxParticles: 150, connectParticles: true, sizeVariations: 8, minDistance: 70, }); var referencia = Particles.init({ selector: '.via-bg-referencia', color: '#d3d9db', maxParticles: 150, connectParticles: true, sizeVariations: 8, minDistance: 70 }); };

When multiple instances of Particle are created, the resumeAnimation and pauseAnimation functions do not work.

any difference? maybe performance or something?

Is there a way to destroy the particles object? I can't see anything obvious in the code.

I have a single-page app, and switching between routes causes an error when it can't find the canvas object on the second page.

Thanks!

It's possible to add multiple colors for the particles?

Publishing a Bower package seems easy and would allow to install this library as a dependency.

Hi there,

I've recently noticed some performance issues with Particles.js in Chrome. I've tested in Firefox with no issues. In chrome the CPU % usage is incredibly high.

It occurs with your example page https://marcbruederlin.github.io/particles.js/. It's quite easy to notice as the particle movement speed is much slower in Chrome.

My details are as follows:
OSX El Capitan - 10.11.6
Chrome Version 65.0.3325.181 (Official Build) (64-bit)

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;
}

Hello,

You might want to look into this. If you define a color array (or string) with CSS color names (eg: seagreen, blue, yellow, red, etc.), and enable connectParticles, the animation fails.
Particles.init({
selector: "#particles",
color: ["seagreen", "yellow", "blue"], // this will fail
connectParticles: true // if this is set to true (it works fine if set to false)
});

It has to do with hextorgb (which doesn't understand color names). Might want to look into fixing this or documenting it!

When an RGBA hex is used, the first frame is drawn but doesnt seem to do anything afterwards.