Interactive Animated Background Plugin With jQuery - CABG

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.