Create Fantastic Canvas Based Bubble Animations - circleMagic.js

File Size: 13.1 KB
Views Total: 8371
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Fantastic Canvas Based Bubble Animations - circleMagic.js

circleMagic.js is a jQuery plugin that lets you create a fantastic bubble animation effect for the background of any container by using HTML5 canvas API.

How to use it:

1. Load the latest version of jQuery library and the jQuery circleMagic.js script at the end of the document.

<script src="//"></script>
<script src="circleMagic.min.js"></script>

2. Call the main function circleMagic on the target container on which you want to generate the bubble animation effect.

  elem: '.container'

3. Customize the bubble animation effect by overriding the default values as shown below to your taste.

  elem: '.container',
  color: 'rgba(255,255,255,.5)',
  radius: 10,
  densety: 0.3,
  clearOffset: 0.2

Change log:


  • rewrite for pre-ES6 browsers

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