HTML5 canvas圆形气泡动画背景插件

circleMagic.js是一款HTML5 canvas圆形气泡动画背景jquery插件。通过circleMagic.js你可以为banner或任何容器制作出随机动画的圆形气泡背景动画效果。

安装

可以通过bower来安装circleMagic.js插件。

bower install circleMagic --save       
                

使用方法

在页面中引入circleMagic.js文件。

<script src="path/to/js/circleMagic.js"></script>        
                

HTML结构

如果要为网站的顶部banner制作气泡背景动画效果，例如使用一个header元素来作为容器。

<header class="header">
    <!-- banner内容 -->
</header>          
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化circleMagic.js圆形气泡动画背景插件。

$('.header').circleMagic({
    elem: '.header',
    radius: 35,
    densety: .3,
    color: 'rgba(255,255,255, .4)',
    //color: 'random',
    clearOffset: .3
});               
                

配置参数

circleMagic.js圆形气泡动画背景插件的可用配置参数有：

circleMagic.js圆形气泡动画背景插件的github地址为：https://github.com/FreAK19/circleMagic.js