A repository of over 1000 quality jQuery plugins

jQuery jQuery Particles

jQuery Particles is a jQuery Animation & Effects plugin.

Created by maaarc

A lightweight (~2kb) and easy-to-use jQuery plugin for particle backgrounds.

Not what you're looking for? Click here to view more Animation & Effects jQuery plugins

particles.js

Build Status dependencies Status devDependencies Status MIT Licence

particles.js is a lightweight (~2kb) and dependency-free javascript plugin for particle backgrounds.

Demo

Installation

There are several ways to install particles.js:

  • Download the latest version
  • Install with npm: npm install particlesjs --save
  • Use the CDN: https://npmcdn.com/particlesjs@1.0.2/dist/particles.min.js

Usage

Include the minified JS in your HTML file.

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

Create a canvas element in your body tag.

<canvas id="myCanvas"></canvas>

Add a few styles to your css.

html,
body {
  margin: 0;
}

#myCanvas {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
}

Initialize the plugin on the window.onload event.

window.onload = function() {
  Particles.init({ options });
};

// e.g.
window.onload = function() {
  Particles.init({
    selector: '#myCanvas',
    color: '#0f9976'
  });
};

Options

OptionDefaultDescription
selector-Required: The CSS selector of your canvas element
maxParticles100Optional: Maximum amount of particles
sizeVariations3Optional: Amount of size variations
speed0.5Optional: Movement speed of the particles
color#000000Optional: Color of particles and connecting lines
minDistance120Optional: Distance in px for conntecting lines
connectParticlesfalseOptional: true/false if connecting lines should be drawn

Browser Support

IE9+ and all modern browsers.

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.
Do you like particles.js? If you want, you can buy me a coffee.

License

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



You might also like these other Animation & Effects jQuery Plugins

 Views
 Downloads

Preview Download Github Page
License:

Copyright © 2016 Marc Brüderlin