Particles

New devjs-particles docs website: click here

Table of Contents

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

License

MIT