marcbruederlin / particles.js Goto Github PK

View Code? Open in Web Editor NEW

1.6K 28.0 214.0 427 KB

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

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

License: MIT License

JavaScript 100.00%

particles particle-backgrounds javascript vanilla-javascript animated responsive

particles.js's Introduction

particles.js

particles.js is a lightweight, dependency-free and responsive javascript plugin for particle backgrounds.

Installation

There are several ways to install particles.js:

Download the latest version
Install with npm: npm install particlesjs --save
Use the CDN: https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js

Usage

Include the minified JS in your HTML (right before the closing body tag).

<body>
  …
  <script src="path/to/particles.min.js"></script>
</body>

Add a canvas element to your markup (it should be the last element)

<body>
  …
  <canvas class="background"></canvas>
  <script src="path/to/particles.min.js"></script>
</body>

Add a few styles to your css.

html,
body {
  margin: 0;
  padding: 0;
}

.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
}

Initialize the plugin on the window.onload event.

window.onload = function() {
  Particles.init({
    selector: '.background'
  });
};

Options

Option	Type	Default	Description
`selector`	string	-	Required: The CSS selector of your canvas element
`maxParticles`	integer	`100`	Optional: Maximum amount of particles
`sizeVariations`	integer	`3`	Optional: Amount of size variations
`speed`	integer	`0.5`	Optional: Movement speed of the particles
`color`	string or string[]	`#000000`	Optional: Color(s) of the particles and connecting lines
`minDistance`	integer	`120`	Optional: Distance in `px` for connecting lines
`connectParticles`	boolean	`false`	Optional: `true`/`false` if connecting lines should be drawn or not
`responsive`	array	`null`	Optional: Array of objects containing breakpoints and options

Example how to use the responsive option.

Methods

Method	Description
`pauseAnimation`	Pauses/stops the particle animation
`resumeAnimation`	Continues the particle animation
`destroy`	Destroys the plugin

Example how to use the public methods.

Browser Support

IE9+ and all modern browsers.

Examples

See various examples how you can use particles.js.

Build

To compile the distribution files by yourself, make sure that you have node.js and gulp installed, then:

Clone the repository: https://github.com/marcbruederlin/particles.js.git
Change in the project directory: cd particles.js
Install the dependencies: npm install
Run the gulp build task gulp build to regenerate the dist folder.
You can also run gulp build --watch to watch for file changes and automatically rebuild the files.

Using particles.js?

If you’re using particles.js in some interesting way or on a cool site, I’d be very grateful if you shoot me a link to it.
For any problems or questions don't hesitate to open an issue.

License

particles.js is created by Marc Brüderlin and released under the MIT license.

Version 1.x

The source code for particles.js 1.x has been moved to the v1 branch.

particles.js's People

Contributors

Stargazers

Watchers

Forkers

ayoungh-forked brandturner npmcdn-to-unpkg-bot ptejeda1 umarmughal radoslavmiladinov dischord01 hishamhaniffa rngala stanosky jqueryalmeida duyguceyhan yamatonagata fizzvr deawx hamidionline bogtan freshmilkdev strt gdg beauxner astarkov ganlight xudongdong wangjishan serviceendpoints sa-alkshali engmohammedmamdouh jpkcom abdallah-khalil easy-web-tut sshyran sourcesoft christilut ok111net kitlawes daniel-gaskins-grey cortesdev php-rock krisj asufian97 adebayo-maborukoje jorrite mcoulthurst tenebrislab lailaidejianghu mcspx willinspire nasabikram cyrke yiziz marhabac33 jayantchauhan-zz gaohelong rajesh-galt cnflyne nemani sousey anant08 sapan211 jolly-pirate lipsworld ux531 aaronksalmon yesterdaytime dmlfsong redcoder4 phpdotsql henrikhasell mshwed lambda8421 patgbull pkkid crono haslead ihaust mschmo biborn quochuydn mjunaidi dksharp yx1900 protikdas fahad-israr ro9ueadmin dardels3 fasibaag ruca-tk viewfhbs mariskas ravel44 samridhprasad fu-you bradforn megfan sanntanna kevinbakkalc powerticmkt peiro83 coding-squad

particles.js's Issues

NPM import not working

Doesn't seem to work when required or imported.

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

Add option for particle bounce.

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.

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

Particles squeezed on top on mobile devices

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>

Doesnt work with RGBA values.

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

Refactoring

action on click or hover

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

Is there a way to update the particles object? I want update color

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

Getting error while including library

what's the difference with VincentGarreau/particles.js ?

any difference? maybe performance or something?

Potential Issues in Edge?

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

Multiple colors

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

Chrome and Safari Issues

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

Detect device pixel ratio

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

Use parentNode's width and height instead of window's sizes.

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.

Multiple particles

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

How to destroy particles object

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!

Change line size of connectParticles

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.

IOS 12 Low FPS/Bad Performance!!

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.

Responsive Breakpoints

responsive: [
  {
    breakpoint: 1024,
      settings: {
        color: '#000000'
        …
      }
  }, {
    breakpoint: 768,
      settings: {
        color: '#ff0000'
        …
      }
  }, {
    breakpoint: xxx,
      settings: {
        disable: true
        …
      }
  }
]

resumeAnimation and pauseAnimation functions not working.

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

Set the canvas width and height using options

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.

Create a Bower package

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

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

Particles.init not returning anything

I'm trying to pause animation with

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

however particles is undefined
the partcicles keep moving/animating

Doesn't work on mobile

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' ], } } ] }); };

Performance issues in Chrome

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)

SVG support

SVG is better than canvas.

Bug: using CSS color names with connectParticles breaks the animation

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!

Pause animation or canvas feature

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.