fallingsnow.js-jquery下雪动画特效

当前位置:主页 > jQuery库 > 布局和界面 > fallingsnow.js-jquery下雪动画特效
fallingsnow.js-jquery下雪动画特效
分享:

    插件介绍

    fallingsnow.js是一款小巧的jquery下雪动画特效插件。该jquery下雪动画特效兼容ie8浏览器,它会控制雪花的飘落速度,雪花的尺寸越小,下落的速度越慢,可以制作出雪花飞舞的视觉差效果。

    浏览器兼容性

    浏览器兼容性
    时间:11-07
    阅读:
简要教程

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