Configurable Snow Falling Effects In JavaScript – snow.js

Category: Animation , Javascript | May 22, 2017
Author:therefor
Views Total:21,935 views
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:


One thought on “Configurable Snow Falling Effects In JavaScript – snow.js

Leave a Reply