Custom Particles Animation With JavaScript And Canvas – particler

Category: Animation , Javascript | March 25, 2016
Author: bereziuk
Views Total: 5,300
Official Page: Go to website
Last Update: March 25, 2016
License: MIT

Preview:

Custom Particles Animation With JavaScript And Canvas – particler

Description:

particler is a really small (~4kb) JS library which takes advantage of html5 canvas to make customizable particles animations for your webpage. Great for creating an animated, modern background for your web project.

Basic usage:

Download and add the minified version of particler into your webpage.

<script src="dist/particler.min.js"></script>

Create an html5 canvas element for the particles animation.

<canvas id="example"></canvas>

Declare a new Particler object with default options.

var ParticlerExample = new Particler("example");

Config the particles animation.

var ParticlerExample = new Particler("example",{

    // these are default options

    // Amount of particles
    quantity: 20,

    // line width
    lineWidth: 0.05,

    // color of particles
    fillColor: "black",

    // min/max sizes
    minSize: 1,
    maxSize: 3,

    // minimailist line length
    minimalLineLength: 250,

    // animation speed
    speed: 25,

    // frame update time
    frameDuration: 20,

    // background color
    backgroundColor: 'transparent'
    
});

You Might Be Interested In:

2 thoughts on “Custom Particles Animation With JavaScript And Canvas – particler

Leave a Reply