fallingsnow.js是一款小巧的jquery下雪动画特效插件。该jquery下雪动画特效兼容ie8浏览器,它会控制雪花的飘落速度,雪花的尺寸越小,下落的速度越慢,可以制作出雪花飞舞的视觉差效果。
使用方法
在页面中引入jquery.fallingsnow.css和jquery、jquery.fallingsnow.min.js文件。
<link rel="stylesheet" href="dist/jquery.fallingsnow.css" type="text/css"> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.fallingsnow.min.js"></script>
HTML结构
可以使用一个<div>
元素作为包裹容器,里面放置另外一个<div>
元素作为下雪的场景。例如:
<style> #snow-wrapper { width: 500px; height: 500px; ... } </style> <div id="snow-wrapper"> <div id="snow"></div> </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过fallingSnow()
方法来初始化该下雪特效插件。
$( "#snow" ).fallingSnow();
配置参数
fallingsnow.js下雪特效插件的可用配置参数有:
-
flakeSizeAdjust
:控制雪花的尺寸。0.1为最小值,默认为1,建议不要设置为0。 -
flakeSpeedAdjust
:控制雪花的速度。0.1为最快速度,默认值为2,建议不要设置为0。 -
stopOnClick
:是否在点击时停止下雪。 -
stopElement
:指定一个点击之后停止下雪的元素,默认为#snow
。 -
drift
:设置雪花飘动效果。默认为100。
fallingsnow.js下雪动画特效的github地址为:https://github.com/RayHyde/fallingsnow
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!