Create Fantastic Canvas Based Bubble Animations - circleMagic.js

File Size: 13.1 KB
Views Total: 8349
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="//code.jquery.com/jquery-3.2.1.slim.min.js"></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.

$('.container').circleMagic({
  elem: '.container'
});

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

$('.container').circleMagic({
  elem: '.container',
  color: 'rgba(255,255,255,.5)',
  radius: 10,
  densety: 0.3,
  clearOffset: 0.2
});

Change log:

2017-07-31

  • 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.