網頁櫻花飄落效果 — snowfall.jquery.js

SAKURA

3月中旬，櫻花盛開~想給你的站點來一場櫻花雨嗎？

獻上jquery雪花插件[snowfall.jquery.js](https://github.com/loktar00/JQuery-Snowfall)

該插件的參數有：

- flakeCount|number 雪花數量- flakeColor|#RGB 雪花顏色- flakeIndex|??? 不清楚- minSize|number 雪花最小體積- maxSize|number 雪花最大體積- minSpeed|number 雪花最小速度- maxSpeed|number 雪花最大速度- round|boolean true雪花圓形|false方形(笑哭)- shadow|boolean true雪花有陰影|false無陰影- image|url 雪花圖片

使用demo

css部分

<style>

.snowfall-flakes{animation:sakura 1s linear 0s infinite;}

@keyframes sakura{

0% {transform:rotate3d(0, 0, 0, 0deg);}

25%{transform:rotate3d(1, 1, 0, 60deg);}

50%{transform:rotate3d(1, 1, 0, 0deg);}

75%{transform:rotate3d(1, 0, 0, 60deg);}

100% {transform:rotate3d(1, 0, 0, 0deg);}

}

</style>

js部分

<script>

$(document).snowfall('clear');

$(document).snowfall({image:"1.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});

$(document).snowfall({image:"2.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});

$(document).snowfall({image:"3.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});

$(document).snowfall({image:"4.png", flakeCount:10, minSpeed:1, minSize:8, maxSize:15,});

<script>

飄落的時候添加了css的3D翻轉效果，使之更加逼真

圖片是用ps一個一個扣下來的。扣好發現jpg格式不能帶透明度，然後又心酸的重新扣png格式的。。。

效果預覽:

[代碼demo](https://github.com/honjun/demo/tree/master/sakura)