fallingsnow.js-jquery下雪动画特效

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。