This time I will share jQuery Plugin and tutorial about Interactive Animated Background Plugin With jQuery – CABG, hope it will help you in programming stack.
| File Size: | 20.1 KB |
|---|---|
| Views Total: | 2192 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
CABG (Canvas Animated Backgrounds) is a funny jQuery plugin that adds animated, interactive backgrounds to your webpages using HTML5 canvas. Currently comes with 3 animation types: dots, circles, balloons. Licensed under the GNU GENERAL PUBLIC LICENSE Version 3.
How to use it:
1. Load the latest version of jQuery JavaScript library and an animation JavaScript of your choice in the webpage.
1 |
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> |
2 |
<script src="jquery-cabg-balloon.js"></script> |
3 |
<script src="jquery-cabg-circlus.js"></script> |
4 |
<script src="jquery-cabg-cooqui.js"></script> |
2. The JavaScript to animate the background with interactive dots.
01 |
$("body").cooqui({ |
02 |
03 |
// options and defaults |
04 |
fps: 60, |
05 |
scale: 1, |
06 |
distance: 100, |
07 |
background: false, |
08 |
spacing: 50, |
09 |
itemSize: 50, |
10 |
itemScale: 2.0, |
11 |
itemColors: ["#0000ff", "#00ff00", "#00ffff", "#ff0000", "#ff00ff", "#ffff00"], |
12 |
unique: true, |
13 |
|
14 |
}); |
3. The JavaScript to animate the background with random circles.
01 |
$("body").circlus({ |
02 |
03 |
// options and defaults |
04 |
fps: 60, |
05 |
scale: 1, |
06 |
background: false, |
07 |
items: 25, |
08 |
itemMinSpeed: 1000, |
09 |
itemMaxSpeed: 2500, |
10 |
itemMinSize: 50, |
11 |
itemMaxSize: 100, |
12 |
itemShapes: ["circle"], |
13 |
itemColors: ["#0000ff", "#00ff00", "#00ffff", "#ff0000", "#ff00ff", "#ffff00"], |
14 |
unique: true, |
15 |
|
16 |
}); |
4. The JavaScript to animate the background with interactive balloons.
01 |
$("body").ballooner({ |
02 |
03 |
// options and defaults |
04 |
fps: 60, |
05 |
scale: 1, |
06 |
distance: 100, |
07 |
background: false, |
08 |
balloons: 10, |
09 |
balloonFactor: 0.4, |
10 |
balloonGradient: 3, |
11 |
balloonMinSize: 25, |
12 |
balloonMaxSize: 50, |
13 |
balloonScale: 2.0, |
14 |
balloonColors: ["#0000ff", "#00ff00", "#00ffff", "#ff0000", "#ff00ff", "#ffff00"], |
15 |
lightColor: "#ffffff", |
16 |
tieWidth: 0.12, |
17 |
tieHeight: 0.10, |
18 |
tieCurve: 0.13, |
19 |
minWind: 10, |
20 |
maxWind: 50, |
21 |
balloonMinSpeed: 50, |
22 |
balloonMaxSpeed: 100, |
23 |
unique: true, |
24 |
|
25 |
}); |
This awesome jQuery plugin is developed by gonzaloalbito. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
