Configurable Snow Falling Effects In JavaScript – snow.js

Category: Animation , Javascript | May 22, 2017
Author: therefor
Views Total: 3,387
Official Page: Go to website
Last Update: May 22, 2017
License: MIT

Preview:

Configurable Snow Falling Effects In JavaScript – snow.js

Description:

snow.js is a small JavaScript plugin that makes use of HTML5 canvas drawing API to create a configurable snow falling effect on the webpage.

How to use it:

Insert the main JavaScript ‘snow.js’ into the webpage and we’re ready to go.

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

Create a canvas element on which you want to draw the snow falling effect.

<canvas id = "snowCanvas" title = "config to get your own snow effect"></canvas>

Initialize the snowCanvas and create a default snow falling effect on the canvas element.

window.onload = _snowCanvas({
  el: document.getElementById("snowCanvas")
});

Config the snow falling effect with the following parameters.

window.onload = _snowCanvas({

  el: document.getElementById("snowCanvas"),

  // color of snowflake
  snowColor: "#a6a6a6",

  // background color 
  backgroundColor: "black",

  // max speed
  maxSpeed: 3.5, 

  // min speed
  minSpeed: .3, 

  // amount of snowflakes
  amount: 150, 

  // max radius of snowflake
  rMax: 4,

  // min radius of snowflake
  rMin: 1, 

  // width of canvas
  width: window.innerWidth,

  // height of canvas
  height: window.innerHeight

});

 

You Might Be Interested In:


Leave a Reply