html5粒子效果背景

所属分类:其他,UI-动画效果,背景

 24617  200  查看评论 (53)
html5粒子效果背景 ie兼容10

CanvasParticles

html5 canvas 实现网页背景粒子效果

1.引入js文件

<script type="text/javascript" src="canvas-particle.js"></script>

2.配置

配置,调用CanvasParticle函数,传入配置参数即可,如果不配置则用默认配置

在你的js文件中加上如下配置

window.onload = function(){
    //配置
    var config = {
        vx: 4,//点x轴速度,正为右,负为左
        vy:  4,//点y轴速度
        height: 2,//点高宽,其实为正方形,所以不宜太大
        width: 2,
        count: 100,//点个数
        color: "121, 162, 185",//点颜色
        stroke: "130,255,255",//线条颜色
        dist: 6000,//点吸附距离
        e_dist: 20000,//鼠标吸附加速距离
        max_conn: 10//点到点最大连接数
    }
    //调用
    CanvasParticle(config);
}


相关插件-动画效果,背景

滚动动画

这是一个功能强大的工具,并且拥有非凡的能力滚动视差插件
  动画效果
 13740  43

html5 水波扩散效果

HTML5实现点击水波扩散效果
  动画效果
 10055  106

3D元素周期表

超炫的3d动画设计
  动画效果
 19849  379

jQuery点赞+1动画效果

一款基于jQuery+CSS3实现的点赞+1动画效果,非常实用
  动画效果
 10297  185

讨论这个项目(53)回答他人问题或分享插件使用方法奖励jQ币

    X 0
    2017/2/17 13:00:39
    求大神,怎么把它作为指定div的背景?
        One丶0
        2017/2/21 17:00:37

        canvas{position:fixed; z-index:-1; top:0;}

    回复
    One丶 0
    2017/2/15 11:04:33
    wx3124558 0
    2017/1/28 23:03:49

    你好,我想请教一个问题哈,我jsp 的结构如下:

    <body>
    	<center>
    		<div class="context">
    			<!-- 登录、注册、注销 -->
    			<div class="heads">
    			</div>
    			
    			<!-- 登录弹窗 -->
    			<div id="login-dialog">
    			</div>
    			
    			<!-- 注册弹窗 -->
    			<div id="regist-dialog">
    			</div>
    
    			<!-- 导航栏 -->
    			<div class="nack">
    			</div>
    			
    			<div class="context1"></div>
    			<div class="foot"></div>
    			<div class="mask"></div>
    		</div>
    	</center>
    </body>

    请问怎么把特效应用到 context 层,我这里就是背景层,小白一个,对前端很懵逼= =

        西瓜0
        2017/1/30 12:10:17

        加到同级或上一层,css设置context浮动即可

        <style>
        	.context{ margin:0 auto; width:1000px; height:80px; border:1px solid #00F}
        </style>
        <body>
        	<script type="text/javascript">
        		window.onload = function() {
        			var config = {
        				vx: 4,
        				vy: 4,
        				height: 2,
        				width: 2,
        				count: 100,
        				color: "121, 162, 185",
        				stroke: "100,200,180",
        				dist: 6000,
        				e_dist: 20000,
        				max_conn: 10
        			}
        			CanvasParticle(config);
        		}
        	</script>
        	<script type="text/javascript" src="canvas-particle.js">
        	</script>
        	<center>
        		<div class="context">
        			....
        		</div>
        	</center>
        </body>
        wx31245580
        2017/1/31 23:31:00

        好的,谢了大哥。

    回复
    holymuch 0
    2016/12/30 11:12:00
    怎么设置兼容的问题 在谷歌上有效果 其他浏览器上没有效果
        One丶0
        2017/2/15 10:47:51

        ie8以下估计实现不来

    回复
    holymuch 0
    2016/12/29 10:12:41

    请问我的怎么没有效果呢 

        holymuch0
        2016/12/30 10:12:41

        要在js里修改什么内容吗

    回复
    (_L.nメ° 0
    2016/12/26 15:12:35

    发现有点小抖动,改了一下鼠标进入画布时xy加速后面的除于数..变大就稳定一点了

    回复
    l ì_ 0
    2016/12/18 14:12:44

    我吧100个全收集起来了

        Panny0
        2017/1/9 12:01:13

        我已经收集好几次了

    回复
    Abnormal 0
    2016/12/15 15:12:34
    很炫酷,膜拜!
        木子日月0
        2016/12/15 17:12:09
        跪了
    回复
    凡夫俗子 0
    2016/11/20 19:11:43
    你好,请问一下怎么设置在网页表面实现这个浮动的效果,新手不太理解,能否举个例子参透一下,谢谢
        (_L.nメ°0
        2016/12/26 15:12:11

        https://isux.tencent.com/canvas-particle-animation.html

    回复
    不言盛景。 0
    2016/11/17 16:11:15
    so nice!但是有一个问题,就是当body的高度高于屏幕高度时,怎么让整个body都能显示整个效果?
        不言盛景。0
        2016/11/17 16:11:31
        刚看了代码,原来注释了...
    回复
取消回复
    PROMULGATOR

    locoti

    湖北省武汉市