Create Cool Visual Effect With jQuery and Canvas - quietflow.js

The quietflow.js jQuery plugin currently provides 9 pretty cool visual effects for your elements' background using HTML5 canvas and a little bit of jQuery.

Visual effects included:

• squareFlash   
• vortex           
• bouncingBalls    
• shootingLines  
• simpleGradient 
• starfield
• layeredTriangles
• cornerSpikes 
• floatingBoxes

Installation:

# NPM
npm install quietflow

# Bower
bower install quietflow

How to use it:

1. Import both jQuery library and the minified version of the jQuery quietflow.js plugin into your html page.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="lib/quietflow.min.js"></script>

2. Call the function on the target container element and specify the visual effect you want to use.

$("body").quietflow({
  theme : "squareFlash"
})

3. All default options of the visual effects.

squareFlash : {
  squareSize : 10,
  maxRed     : 255,
  maxGreen   : 255,
  maxBlue    : 255,
  speed      : 100
},

vortex : {
  mainRadius    : 20,
  miniRadii     : 30,
  backgroundCol : "#3498DB",
  circleCol     : "#34495E",
  speed         : 10
},

bouncingBalls : {
  specificColors  : [],
  backgroundCol   : "#ECF0F1",
  maxRadius       : 40,
  bounceSpeed     : 50,
  bounceBallCount : 50,
  transparent     : true
},

shootingLines : {
  backgroundCol : "#000",
  lineColor     : "#FFF",
  speed         : 150,
  lineGlow      : "#FFF",
  lines         : 50
},

simpleGradient : {
  primary : "#D4145A",
  accent  : "#FBB03B"
},

starfield : {
  starColor : "#FFF",
  starSize  : 3,
  speed     : 100
},

layeredTriangles : {
  backgroundCol  : "#D6D6D6",
  transparent    : true,
  specificColors : [],
  triangles      : 50
},

cornerSpikes : {
  specificColors : [],
  backgroundCol  : "#FFF",
  lineColor      : "#000",
  speed          : 100,
  lineGlow       : "#FFF"
},

floatingBoxes : {
  specificColors : [],
  boxCount       : 400,
  maxBoxSize     : 80,
  backgroundCol  : "#D6D6D6",
  transparent    : false,
  speed          : 100
}

---

This awesome jQuery plugin is developed by paulkr. For more Advanced Usages, please check the demo page or visit the official website.