❤Nihilism Philisophy Major

    npm

    Sign UpSign In

    particlesjs

    2.2.3 • Public • Published

    particles.js

    Github file size Travis David David npm CDNJS GitHub license

    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.

    Keywords

    Install

    npm i particlesjs

    Repository

    Gitgithub.com/marcbruederlin/particles.js

    Homepage

    marcbruederlin.github.io/particles.js/

    DownloadsWeekly Downloads

    741

    Version

    2.2.3

    License

    MIT

    Unpacked Size

    43.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • marcbruederlin
    Try on RunKit
    Report malware