Interactive Animated Background Plugin With jQuery - CABG
File Size: | 20.1 KB |
---|---|
Views Total: | 2450 |
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.
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script src="jquery-cabg-balloon.js"></script> <script src="jquery-cabg-circlus.js"></script> <script src="jquery-cabg-cooqui.js"></script>
2. The JavaScript to animate the background with interactive dots.
$("body").cooqui({ // options and defaults fps: 60, scale: 1, distance: 100, background: false, spacing: 50, itemSize: 50, itemScale: 2.0, itemColors: ["#0000ff", "#00ff00", "#00ffff", "#ff0000", "#ff00ff", "#ffff00"], unique: true, });
3. The JavaScript to animate the background with random circles.
$("body").circlus({ // options and defaults fps: 60, scale: 1, background: false, items: 25, itemMinSpeed: 1000, itemMaxSpeed: 2500, itemMinSize: 50, itemMaxSize: 100, itemShapes: ["circle"], itemColors: ["#0000ff", "#00ff00", "#00ffff", "#ff0000", "#ff00ff", "#ffff00"], unique: true, });
4. The JavaScript to animate the background with interactive balloons.
$("body").ballooner({ // options and defaults fps: 60, scale: 1, distance: 100, background: false, balloons: 10, balloonFactor: 0.4, balloonGradient: 3, balloonMinSize: 25, balloonMaxSize: 50, balloonScale: 2.0, balloonColors: ["#0000ff", "#00ff00", "#00ffff", "#ff0000", "#ff00ff", "#ffff00"], lightColor: "#ffffff", tieWidth: 0.12, tieHeight: 0.10, tieCurve: 0.13, minWind: 10, maxWind: 50, balloonMinSpeed: 50, balloonMaxSpeed: 100, unique: true, });
This awesome jQuery plugin is developed by gonzaloalbito. For more Advanced Usages, please check the demo page or visit the official website.