退出
前端视频教程 小程序 众筹源码 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>

猜你喜欢...
thinkphp5仿京东多商户专业电商平台源码
2021在线药品下单配送保健商城源码
thinkphp粉色生活资讯图文分类门户站
excel通用查询填报系统 财务统计表单录入公式计算
ThinkPHP收银进销存强大的图表和数据统计报表
WordPress简约高端企业通用产品展示主题公司官网模板响应式布局
ThinkPHP5独立版万能门店小程序修复版 无限DIY自由设计 支持代理商功能
帝国CMS美化版公众号微信群二维码发布平台整站源码 带免签支付接口
ThinkPHP社区团购拼团购物商城系统源码 拼团商城小程序源码
微信小程序在线封装系统源码 可实现单页分享 H5小程序封装系统
ThinkPHP手机端App小程序公众号多端支持在线客服系统源码 无限账号席位
PHPIOS在线免签封装APP分发平台源码 一键IOS免签封装 第三方免签支付
ThinkPHP微信万能门店小程序运营管理系统 多端多行业模板 拖拽DIY布局
ThinkPHP运营级H5公众生鲜蔬菜商城系统源码 支持封装APP
PHP小说在线阅读听书门户网站 带AI智能语音朗读听书功能 自动采集小说
PHP社区蔬菜生鲜团购商城小程序源码 社区超市配送服务平台支持在线直播卖货
手赚汇给客户开发的一套手赚网新UI
ThinkPHP全新兼容安卓苹果微信投诉按钮屏蔽程序 微信域名防封防红系统
Discuz社区交流论坛门户网站源码 纯净版整站论坛源码 带网站数据
PHP高大上微信小程序APP开发企业网站模板 互联网开发公司官网整站源码