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.
File Size: | 18.2 KB |
---|---|
Views Total: | 2755 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
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.
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.
1 |
$( "body" ).quietflow({ |
2 |
theme : "squareFlash" |
3 |
}) |
3. All default options of the visual effects.
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