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

Download Create Cool Visual Effect With jQuery and Canvas – quietflow.js

By Posted on

This time I will share jQuery Plugin and tutorial about Create Cool Visual Effect With jQuery and Canvas – quietflow.js, hope it will help you in programming stack.

Create Cool Visual Effect With jQuery Canvas quietflow js - Download Create Cool Visual Effect With jQuery and Canvas - quietflow.js
File Size: 18.2 KB
Views Total: 2755
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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:

view source
1 # NPM
2 npm install quietflow
3  
4 # Bower
5 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.

view source
1 <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
2 <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.

view source
1 $("body").quietflow({
2   theme : "squareFlash"
3 })

3. All default options of the visual effects.

view source
01 squareFlash : {
02   squareSize : 10,
03   maxRed     : 255,
04   maxGreen   : 255,
05   maxBlue    : 255,
06   speed      : 100
07 },
08  
09 vortex : {
10   mainRadius    : 20,
11   miniRadii     : 30,
12   backgroundCol : "#3498DB",
13   circleCol     : "#34495E",
14   speed         : 10
15 },
16  
17 bouncingBalls : {
18   specificColors  : [],
19   backgroundCol   : "#ECF0F1",
20   maxRadius       : 40,
21   bounceSpeed     : 50,
22   bounceBallCount : 50,
23   transparent     : true
24 },
25  
26 shootingLines : {
27   backgroundCol : "#000",
28   lineColor     : "#FFF",
29   speed         : 150,
30   lineGlow      : "#FFF",
31   lines         : 50
32 },
33  
34 simpleGradient : {
35   primary : "#D4145A",
36   accent  : "#FBB03B"
37 },
38  
39 starfield : {
40   starColor : "#FFF",
41   starSize  : 3,
42   speed     : 100
43 },
44  
45 layeredTriangles : {
46   backgroundCol  : "#D6D6D6",
47   transparent    : true,
48   specificColors : [],
49   triangles      : 50
50 },
51  
52 cornerSpikes : {
53   specificColors : [],
54   backgroundCol  : "#FFF",
55   lineColor      : "#000",
56   speed          : 100,
57   lineGlow       : "#FFF"
58 },
59  
60 floatingBoxes : {
61   specificColors : [],
62   boxCount       : 400,
63   maxBoxSize     : 80,
64   backgroundCol  : "#D6D6D6",
65   transparent    : false,
66   speed          : 100
67 }

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

source : jqueryscript.net

Related posts: