Canvas Bubble Animations jQuery circleMagic - Download Create Fantastic Canvas Based Bubble Animations - circleMagic.js

Download Create Fantastic Canvas Based Bubble Animations – circleMagic.js

By Posted on

This time I will share jQuery Plugin and tutorial about Create Fantastic Canvas Based Bubble Animations – circleMagic.js, hope it will help you in programming stack.

Canvas Bubble Animations jQuery circleMagic - Download Create Fantastic Canvas Based Bubble Animations - circleMagic.js

File Size: 13.1 KB
Views Total: 7489
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
2 <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.

view source
1 $('.container').circleMagic({
2   elem: '.container'
3 });

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

view source
1 $('.container').circleMagic({
2   elem: '.container',
3   color: 'rgba(255,255,255,.5)',
4   radius: 10,
5   densety: 0.3,
6   clearOffset: 0.2
7 });

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.

source : jqueryscript.net

Related posts: