Interactive Particle Animation With JavaScript – JParticles

Category: Animation , Javascript , Recommended | September 21, 2018
Author: Barrior
Views Total: 3,889
Official Page: Go to website
Last Update: September 21, 2018
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:

Load the JParticles library in the html document.

<script src="/path/to/particleground.all.js"></script>

Or …

<script src="/path/to/particleground.js"></script>
<script src="/path/to/particle.js"></script>

Create a DIV container to place the Particle Animation.

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

Create a new particle object and we’re done.

new Particleground.particle( '#demo' );

Default configuration options.

// amount of particles
num: .12,

// max size
maxR: 2.4,

// min size
minR: .6,

// distance between particles
proximity: .2

// 0 = no line
range: .2

// max animation speed
maxSpeed: 1,

// min animation speed
minSpeed: 0,

// line width
lineWidth: .2,

// 'spider' or 'cube'
lineShape: 'spider'

// null = canvas
eventElem: null,

// enable parallax effect
parallax: false,

// depth of layer
parallaxLayer: [1, 2, 3],

// parallax strength
parallaxStrength: 5

Changelog:

v2.0.1 (09/21/2018)

  • Bugfix

You Might Be Interested In:

Leave a Reply