A Concise, Lightweight, and Efficient Canvas Library for Cool Particle Effects | JParticles

JParticles (short for JavaScript Particles) is a lightweight JavaScript library for building a UI base on Canvas. This provides some cool particle effects to surprise the user.

JParticles’ effects are mostly shared by others, but they pull them together like a porter and introduce details or functional improvements. Here, thanks for the original author’s ideas and icons.

particle effects after effects, particle effect png, free particle overlays, particle effects download, after effects particles download, cool particle effects minecraft

How to make use of it:

Installation:

$ npm install JParticles

Load the JParticles library within the HTML doc.

<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 position the Particle Animation.

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

Create a brand new particle object and we’re accomplished.

new Particleground.particle( '#demo' );

Default configuration choices.

// 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

Interactive Particle Animation, JParticles Plugin/Github, particle effects after effects plugin

See Demo And Download