Devjs-particles NPM

Particles

New devjs-particles docs website: click here

Features
Browser
Installing
Example
Config

Features

Make HTMLCanvasElemnt effects
Easy to customizing

Browser Support


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Installing

Using npm:

$ npm install devjs-particles

Using yarn:

$ yarn add devjs-particles

Example

<div id="container"></div>

const containerEl = document.querySelector('#container')

const effect = particles.initParticles({
  container: containerEl,
})

// or

const effect = particles.initBall({
  container: containerEl,
})

// or

const effect = particles.initWeb({
  container: containerEl,
})

// remove effect
effect.destroy()

Config

initParticles()

{
  // `colors` is the particles spark color
  colors: ['#000'] // default
}

initBall()

{
  // `count` is the number of balls
  count: 200 // default
  
  // `distance` is the triggered distance of expand ball distance
  distance: 200 // default
  
  // `radius` is the ball radius
  radius: 20 // default,
  
  // `maxRadius` is the max expand radius
  maxRadius: 40 // default
  
  // `colors` is the ball color
  colors: ['#000'] // default
}

initWeb()

{
  // 'ballCnt' is the number of balls
  ballCnt: 500 // default
  
  // 'ballColor' is the color of balls
  ballColor: '#000' // default
  
  // 'distance' is the trigger web distance
  distance: 100 // default
}