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> <!-- 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圆形气泡动画背景插件的可用配置参数有：

参数 描述

elem 要应用圆形气泡动画背景效果的容器元素。

radius 定义圆形的半径。

densety 指定屏幕中显示圆形的密度。

color 圆形气泡的颜色。可以是CSS颜色值或关键字random。

clearOffset 定义消失的圆形气泡的数量。

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