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

当前位置:主页 > Html5库 > html5 canvas > HTML5 canvas圆形气泡动画背景插件
HTML5 canvas圆形气泡动画背景插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-05-25
    阅读:
简要教程

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

参数 描述
elem 要应用圆形气泡动画背景效果的容器元素。
radius 定义圆形的半径。
densety 指定屏幕中显示圆形的密度。
color 圆形气泡的颜色。可以是CSS颜色值或关键字random
clearOffset 定义消失的圆形气泡的数量。

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

网友评论