JavaScript library for creating particles animation.
TypeScript JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist npm update Feb 7, 2016
examples documentation Feb 5, 2016
.gitignore package config Jan 31, 2016
README.md Update README.md Mar 23, 2016
package.json npm update Feb 7, 2016
tsconfig.json documentation Feb 5, 2016

README.md

Particler

Lightweight JavaScript canvas animation library for particles animation.

Installation

npm install particler --save
<!-- create canvas tag -->
<canvas id="particler-instance"></canvas>
<!-- define proper styles if needed -->

<!-- include particler.js library -->
<script src="node_modules/particler/dist/particler.js"></script>

<script type="text/javascript">
    // define your configuration (optional)
    var particlerOptions = {
        quantity: 50,
        fillColor: "#000"
    };

    // create particler instance
    var particlerExample = new Particler("particler-instance", particlerOptions);
</script>

Configuration

properties type default value notes
backgroundColor string "transparent" Canvas background color
fillColor string "#000000" Dots and lines color
frameDuration number 20 Frame update time
lineWidth number 0.05 Lines width
minimalLineLength number 250 The minimum height to draw lines beetwen dots
minSize number 1 Minimal dot size
maxSize number 3 Maximal dot size
quantity number 20 Amount of dots in animation
speed number 25 Distance of dot movement during frames