沉沙
2018-07-09
来源 :
阅读 2247
评论 0
摘要:这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件HTML5 canvas元素,然后在canvas中制作下雪特效。希望阅读本篇文章以后大家有所收获,帮助大家对HTML5的理解更加深入。
简要教程
这是一款基于jquery的超逼真下雪场景特效。该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效。
使用方法
在页面中引入ThreeCanvas.js、jquery和Snow.js和snowFall.js文件。
<script src="path/to/ThreeCanvas.js"></script> <script src="path/to/jquery.min.js"></script> <script src="path/to/Snow.js"></script> <script src="path/to/snowFall.js"></script>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该下雪特效。
$.snowFall({
//创建粒子数量,密度
particleNo: 500,
//粒子下落速度
particleSpeed:30,
//粒子在垂直(Y轴)方向运动范围
particleY_Range:1300,
//粒子在垂直(X轴)方向运动范围
particleX_Range:1000,
//是否绑定鼠标事件
bindMouse: false,
//相机离Z轴原点距离
zIndex:600,
//摄像机视野角度
angle:55,
wind_weight:0
});
配置参数
o particleNo:创建粒子数量,密度。
o particleSpeed:粒子下落的速度。
o particleY_Range:粒子在垂直(Y轴)方向运动范围。
o particleX_Range:粒子在垂直(X轴)方向运动范围。
o bindMouse:是否绑定鼠标事件。
o zIndex:相机离Z轴原点距离。
o angle:角度。
o wind_weight:风的等级。
本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端HTML5/CSS3频道!
喜欢 | 2
不喜欢 | 2
您输入的评论内容中包含违禁敏感词
我知道了

请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号