Create A Background Particles System With JavaScript And Canvas – nodes.js

Category: Animation , Javascript | January 26, 2019
Author: rohanrhu
Views Total: 686
Official Page: Go to website
Last Update: January 26, 2019
License: MIT

Preview:

Create A Background Particles System With JavaScript And Canvas – nodes.js

Description:

The nodes.js JavaScript library lets you create a particles system with animated nodes and connecting lines for the background.

Built using pure JavaScript and HTML5 canvas API.

How to use it:

Link to the nodes.js JavaScript library.

<script src="js/nodes.js"></script>

Create an HTML canvas element to place the particles system.

<canvas id="nodes"></canvas>

Create a new NodesJs object to generate a default particles system on the canvas.

var nodesjs = new NodesJs({
    // options here
});

Customize the particles system using the following parameters.

var nodesjs = new NodesJs({

    // container ID
    id: 'nodes',

    // width
    width: window.innerWidth,

    // height
    height: window.innerHeight,

    // background transition options
    backgroundFrom: [10, 25, 100],
    backgroundTo: [25, 50, 150],
    backgroundDuration: 4000,

    // the number of particles
    number: window.hasOwnProperty('orientation') ? 30: 100,

    // animation speed
    speed: 20
    
});

You Might Be Interested In:


Leave a Reply