Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码
充值

HTML5 Canvas彩色圆点粒子飘动动画特效

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2019-06-17
HTML5 Canvas彩色圆点粒子飘动动画特效,粒子元素放大缩小随机飘动网页背景动画特效,下方有详细的参数设置注释说明。


js代码

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/particle.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var c = new Cbg({
	container: ".canvas",
	//随机生成动画,默认无控制
	control: "auto",
	//鼠标跟随控制
	//control: "mouse",
	//坐标点定位控制
	//control: "coordinate",
	//设置坐标点,默认屏幕中心,坐标点定位控制时使用
	//x: $(window).width() / 2,
	//y: $(window).height() / 2
	//Canvas宽度高度自定义,默认全屏
	width: $(window).width(),
	height: $(window).height(),
	//生成点尺寸设置
	//size: [初始大小, 尺寸衰减速率(数值越大,尺寸缩减越快,反之越慢,最小不得小于0.01)],
	size: [10, 0.2],
	//生成点的类型,type
	//type:color 生成点为颜色块
	type: "color",
	//生成点颜色列表,随机刷新颜色
	color: ["#6525EE", "#007AFF", "orange", "orangered"],
	//生成点颜色单值,固定颜色刷新
	//color: "red",

	//type:img 生成点为图片,图片比例1:1
	//type: "img",
	//生成点图片列表,随机刷新图片
	//imgUrl: ["图片路径", "图片路径",....],
	//生成点图片单值,固定图片刷新
	//imgUrl: "图片路径",
	//动画类型:
	//animation_type: 0(默认动画,随机方位,随机方向)
	//animation_type: 1(向左运动)
	//animation_type: 2(向右运动)
	//animation_type: 3(向下运动)
	//animation_type: 4(向上运动)
	animation_type: 0,
	//生成点生成速率,数值越大,点的生成越慢
	speed: 10,
})
</script>

猜你喜欢...
74cms5.0含所有商业插件+WeChat mini_v1.0.14骑士5.0小程序前端和5.0配置教程
Thinkphp多VIP等级推广聊投资赚收益金融平台外包客户开发运营版
跑分自助补单客户二开独立版
Thinkphp5在线智能还款APP 在线申请APP 样卡神奇 高效率还款 智能账单管理 实时提醒永不逾期
米哆全民软文推广1.8.5微擎微信公众号文章营销推广系统源码
全功能运营版龙兵社区拼团社区团购8.0.73小程序 电商型社区团购系统源码
laravel客客威客3.6众包任务平台正版带开发和后台使用手册
江小白服饰贴图定制1.0.26微擎小程序源码 订购商城DIY贴图系统源码
Thinkphp仿抖音快手朋友圈点赞 自动挂机做任务赚钱平台源码
黄色UI新版区块链挖矿二开运营版
有钱还超火爆众筹系统微擎运营版送白皮书
135k代驾搭车1.2.20微擎微信小程序源码 同城代驾系统源码
免签直达商户支付自动充值系统共六个模块带详细对接文档
Thinkphp5有钱还智能还款还贷系统包搭建
千行云论坛5.2.2带课堂答题考试和积分商城多个插件
深海易支付8.3.0全解密并去除授权带在线开发文档
大橙子3.16模板白色干净的响应式电影整站源码
数字资产区块链期权交易平台源码时间盘点位盘外汇交易平台源码
多商户商业版商城网站源码 四合一集合版 送安装教程
诺诺9.1二开视频打赏赚钱平台源码 对接支付跳转 火车头采集半自动采集