fallingsnow.js-jquery下雪動畫特效

listjjjclove發表於2024-11-30
JSjQuery動畫特效

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。

相關文章