Interactive Particle Animation With JavaScript – JParticles

A dependency-free JavaScript library for creating animated, interactive, configurable particle animations on a Canvas element that reacts to your cursor.

Animations Included:

• Particle
• Wave
• Snow Falling
• Line
• Liquid Loader

Installation:

$ npm install JParticles

How to use it:

1. Import the JParticles.

<!-- All In One -->
<script src="/path/to/browser/jparticles.all.js"></script>
<!-- OR... -->
<script src="/path/to/browser/jparticles.base.js"></script>
<script src="/path/to/browser/line.js"></script>
<script src="/path/to/browser/particle.js"></script>
<script src="/path/to/browser/snow.js"></script>
<script src="/path/to/browser/wave.js"></script>
<script src="/path/to/browser/wave-loading.js"></script>

// As a Vue component
import { Particle } from 'jparticles'
export default {
  mounted() {
    new Particle('#demo')
  }
}

// As a React component
import { Particle } from 'jparticles'
class Example extends React.Component {
  componentDidMount() {
    new Particle('#demo')
  }
  render() {
    return <div id="demo"></div>
  }
}

2. Create a DIV container to place the Particle Animation.

<div id="demo" style="width: 400px; height: 250px;"></div>

3. Create a particle effect.

new JParticles.particle('#demo', {
    // opacity: 0 ~ 1
    opacity: 1,
    // 'red' or ['red', 'blue', 'green']
    color: [],
    // auto resize to fit the screen
    resize: true,
    // number of particles
    num: 0.12,
    // max radius
    maxR: 2.4,
    // min radius
    minR: 0.6,
    // max speed
    maxSpeed: 1,
    // min speed
    minSpeed: 0.1,
    // connection line options
    proximity: 0.2,
    range: 0.2,
    // line width
    lineWidth: 0.2,
    // spider or cube
    lineShape: 'spider',
    // null = current canvas element
    eventElem: null,
    // enable parallax effect
    parallax: false,
    // parallax layers
    parallaxLayer: [1, 2, 3],
    // pallax strength
    parallaxStrength: 3,
    
});

4. Create a wave animation.

new JParticles.Wave('#demo', {
    // opacity: 0 ~ 1
    opacity: 1,
    // 'red' or ['red', 'blue', 'green']
    color: [],
    // auto resize to fit the screen
    resize: true,
    // number of waves
    num: 3,
    // draw lines
    line: true,
    // line colors
    lineColor: [
      'rgba(0, 190, 112, 0.5)',
      'rgba(0, 190, 112, 0.7)',
      'rgba(0, 190, 112, 0.9)',
    ],
    // width
    lineWidth: [0.5, 0.7, 0.9],
    // fill background
    fill: false,
    // background colors
    fillColor: [],
    // offset
    offsetLeft: [2, 1, 0],
    offsetTop: 0.75,
    // height of crest
    crestHeight: [10, 14, 18],
    // number of crests
    crestCount: 2,
    // animation speed
    speed: 0.1,
    
})

5. Create a snow falling effect.

new JParticles.Snow('#demo', {
    // opacity: 0 ~ 1
    opacity: 1,
    // 'red' or ['red', 'blue', 'green']
    color: [],
    // auto resize to fit the screen
    resize: true,
    // number of snowflakes
    num: 6,
    // color
    color: '#fff',
    // max radius
    maxR: 2.4,
    // min radius
    minR: 0.6,
    // max speed
    maxSpeed: 1,
    // min speed
    minSpeed: 0.1,
    // duration of animation in ms
    duration: 200,
    // randomly change the direction of falling
    swing: true,
    swingInterval: 2000,
    swingProbability: 0.06,
    // custom shape
    shape: [
      'triangle', 'circle', 'star', 'star:4:0.5',
      'gift.png'
    ],
})

6. Create a line animation.

new JParticles.Line('#demo', {
    // opacity: 0 ~ 1
    opacity: 1,
    // 'red' or ['red', 'blue', 'green']
    color: [],
    // auto resize to fit the screen
    resize: true,
    // number of lines
    num: 6,
    // max width
    maxWidth: 2,
    // min width
    minWidth: 1,
    // max speed
    maxSpeed: 3,
    // min speed
    minSpeed: 1,
    // max degree
    maxDegree: 90,
    // min degree
    minDegree: 80,
    // create new lines on click
    createOnClick: true,
    // number lines to create on click
    numberOfCreations: 3,
    // remove lines when going out of the canvas
    removeOnOverflow: true,
    overflowCompensation: 20, // in px
    // number of lines to reserve
    reservedLines: 6,
})

7. Create a liquid loading animation.

new JParticles.WaveLoading('#demo', {
    // opacity: 0 ~ 1
    opacity: 1,
    // 'red' or ['red', 'blue', 'green']
    color: [],
    // auto resize to fit the screen
    resize: true,
    // number of waves
    num: 1,
    // font styles
    font: 'normal 400 16px Arial',
    // font color
    textColor: '#333',
    // loading text
    textFormatter: 'loading...%d%',
    // draw lines
    line: false,
    // fill background
    fill: true,
    // background colors
    fillColor: [],
    // offset
    offsetLeft: 0,
    // height of crest
    crestHeight: 4,
    // number of crests
    crestCount: 1,
    // duration of the animation
    duration: 5000,
    
    // linear or swing
    easing: 'swing',
})

8. API method.

const instance = new JParticles.Particle('#demo');
// start the animation
instance.open()
// pause the animation
instance.pause()

9. Trigger a function when the instance is destroyed.

instance.onDestroy(() => {
  // do something
})

Changelog:

v3.4.0 (07/24/2021)

• Added more settings and methods to the Snow effect.

v3.2.0 (07/14/2021)

• Particle and Snow effects now support custom shapes

v3.1.0 (04/13/2021)

• JS updated

v3.0.0 (03/18/2021)

• Support mask function used for custom logo.
• Full support for TypeScript.
• Added line animation effect.
• Improve some APIs

v3.0.0beta2 (03/18/2021)

• Code refactor

v3.0.0beta (01/28/2021)

• Code refactor

v2.1.0 (07/22/2018)

• Code refactor

v2.0.1 (09/21/2018)

• Bugfix