@gregorydorrifourt/particles NPM

@gregorydorrifourt/particles

Interactive particles background

Install

Using npm

npm install @gregorydorrifourt/particles

Using yarn

yarn add @gregorydorrifourt/particles

Hosting / CDN

File hosted at JSDelivr. Simply add this script before the closing body tag.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@gregorydorrifourt/particles@latest/lib/particles.min.js"></script>

Usage

Create a <canvas> tag in your html. Default id is particles-background.

<canvas id="particles-background"></canvas>

Now in javascript, on window load, create a new instance of Particles class then call render().

<script type="text/javascript">
    window.onload = function(){
        var particles = new Particles();
        particles.render();
    }
</script>

Configuration

Particles.render takes a config object as parameter.

<script type="text/javascript">
    window.onload = function(){
        var config = {
            element: 'particles-background',
            contain: false,
            threshold: 150,
            particlesForScreenWidths: {
                small: 70,
                medium: 100,
                large: 150
            },
            fullscreen: false,
            addParticleOnClick: false,
            color: '#404040',
            bubble: true
        };
        var particles = new Particles(config);
        particles.render();
    }
</script>

You can use this online generator to test and create your own config :

Attribute	Type	Description	Default
addParticleOnClick	`Boolean`	Add a new particle on click	`false`
bubble	`Boolean`	Particles grow when mouse is approching	`true`
color	`String`	Color of particles and strokes	`#404040`
contain	`Boolean`	Particles stay within canvas boundaries. Affect density on small sizes	`false`
element	`String`	Id of canvas tag	`particles-background`
fullscreen	`Boolean`	Canvas element take all the screen and checks `window.resize` event	`false`
particlesForScreenWidths	`Object`	Set the number of particles for screens sizes	`{ small: 70, medium: 100, large: 150 }`
threshold	`Number`	Set the maximum distance to draw a line between 2 dots. `0` => no lines	`150`

Methods

Function	Parameters	Description
`Particles.render()`	`Config object`	Creates background
`Particles.reset()`	`Config object`	Resets background with new config object
`Particles.resume()`		Resume canvas animation
`Particles.stop()`		Stop canvas animation