Skip to content

jbratcher/canvas-particles-js

Repository files navigation

Canvas Particles

A Canvas Particle Library written in vanilla JS for use with the canvas HTML5 elemnt.

v1.0.8

How to Use canvas-particles

To start a new project

Copy the HTML, CSS, and JS files for the animation you want and place it in your project directory.

To add to an existing project

Copy just the JS file for the animation you want and place it in your project directory. Add a link to the js file from your html file. Add a canvas element to your html file where you would like the animation to display.

The CSS file removes padding and margin from the body and a background radial gradient which is optional but is included for demo purposes.

Current Animations

  • Balls: Multicolored Balls that grow on mouse over (solid background)
  • Vertical: White balls of various small sizes rise from top and fall from bottom infinitely (blue radial background from botom center)
  • Float Up: White balls of various small sizes float up infinitely (blue radial background from botom center)
  • Float down: White balls of various small sizes float down infinitely (blue radial background from botom center)
  • Gravity: Multicolored balls fall down with simulated gravity and friction
  • Wobble Down: White balls fall down as they wobble on the x-axis
  • Wobble Up: White balls float up as they wobble on the x-axis
  • Weather Left: White balls fly to the left simulating snow weather.
  • Weather Right: White balls fly to the right simulating snow weather.

Change Log

v1.0.8

  • Change Weather to Weather Right
  • Added Weather Left
  • Added Gravity effect to Weather animations

v1.0.7

  • Added Weather
  • Updated Readme

v1.0.6

  • Added Wobble Up and Wobble Down (Yay!)
  • Updated Readme

v1.0.5

  • Added Gravity
  • Updated Readme

v1.0.4

  • Added Fall Down
  • Reduced dy on all except Balls

v1.0.3

  • Added Float Up

v1.0.2

  • Added Vertical
  • Added blue radial gradient to all except Balls

v1.0.1

  • Refactor of Balls
  • Branded color array for Balls

v1.0.0

  • Inital commit of Balls

About

Particle effects with HTML5 Canvas and Javascript

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published