particle-animation

1.1.1 • Public • Published

Particle animation

Codacy Badge

Live demo

Add a cool animation to your web site to add life! Tree of nodes pulling on each other randomly to create a soothing behaviour. Starts with an offsets and always seek the center of canvas.

Installation

npm install particle-animation --save

Features

Available options:

   var defaultOptions = {
            id: "elementId", // element id to draw canvas
            levels: 5, // number of levels in the tree
            maximumNodes: 1000, // maximum nodes in the tree
            color:"#0059b3", // Monochrome color, will have different alpha depending on level
            palette : ["#0059b3", "#4CE038", "#E32023", "#ffa500"], //Randomly color nodes using this pallette
            relationColor: '#F5F9FA', // Used to show when parent node pulls children nodes
            usePalette:false,
            drawLines:false
        }

Available methods:

    toggleColors()
    toggleDrawLines()
    stop()
    run() 

Usage example

html file

<div id="container">
 
</div>

javascript file

import ParticleAnimation from "particle-animation"
 
var animation = new ParticleAnimation({
      id: "container",
      levels: 5,
      maximumNodes: 1000
    });
animation.run();
<script>

Release History

  • 1.0.1 to 1.06
    • Just updating readme file
  • 1.0.0
    • First release

Author

Erik Andreas Larsen– @mapnotererik@larsensolutions.no

Code repository and issue reporting

License

Distributed under the ISC license.

/particle-animation/

    Package Sidebar

    Install

    npm i particle-animation

    Weekly Downloads

    3

    Version

    1.1.1

    License

    ISC

    Unpacked Size

    2.28 MB

    Total Files

    13

    Last publish

    Collaborators

    • larsen