Interactive Particle Animation With JavaScript – JParticles

Category: Animation , Javascript , Recommended | March 29, 2021
Author: Barrior
Views Total: 76 views
Official Page: Go to website
Last Update: March 29, 2021
License: MIT

Preview:

Interactive Particle Animation With JavaScript – JParticles

Description:

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

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 new particle object and we’re done.

new JParticles.particle('#demo');

4. Config & customize the particle animation by overriding the default options as shown below.

new JParticles.particle('#demo',{

    /* global options */
    // opacity: 0 ~ 1
    opacity: number,

    // 'red' or ['red', 'blue', 'green']
    color: string | string[],

    // auto resize to fit the screen
    resize: boolean,

    // number of particles
    num: number,

    // max/min radius: 0 ~ +∞
    maxR: number,
    minR: number,

    // max/min speed: 0 ~ +∞
    maxSpeed: number,
    minSpeed: number,

    // (0, 1) or 0 & [1, +∞)
    proximity: number

    // (0, 1) or 0 & [1, +∞)
    range: number,

    // line width
    lineWidth: number,

    // line shape
    lineShape: 'spider' | 'cube',

    eventElem: null | HTMLDocument | HTMLElement,

    // enable parallax effect
    parallax: boolean,

    // e.g [1, 3, 5, 10]
    parallaxLayer: number[],

    // parallax strength
    parallaxStrength: number,

    /* Line options */
    // number of lines
    num: number,

    // max/min width
    maxWidth: number,
    minWidth: number,

    // max/min speed
    maxSpeed: number,
    minSpeed: number,

    // max/min degress: 0 ~ 1
    maxDegree: number,
    minDegree: number,

    // x: horizontal
    // y: vertical
    // xy: random
    direction: 'x',

    // create lines on click
    createOnClick: boolean,

    // number of lines to create
    numberOfCreations: number,

    // remove overflowing lines
    removeOnOverflow: boolean,

    // 0 ~ +∞
    overflowCompensation: number,

    // number of reserved lines
    reservedLines: number,
    
});

5. API method.

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

6. Trigger a function when the instance is destroyed.

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

Changelog:

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

You Might Be Interested In:


Leave a Reply