nice-Snowing是一款使用HTML5 canvas制作的效果非常炫酷的3D雪花飘落特效插件。该雪花飘落特效使用不同的canvas来制作不同层次的雪花效果,使整个下雪场景具有明显的3D空间层次感,使下雪效果更加真实。
使用方法
使用该雪花飘落特效首先要引入jQuery和snow-plugin.js文件。
< script src = "js/jquery.min.js" type = "text/javascript" ></ script > < script src = "js/snow-plugin.js" ></ script > |
HTML结构
< canvas class = "snow-canvas" speed = "1" interaction = "false" size = "2" count = "80" opacity = "0.00001" start-color = "rgba(253,252,251,1)" end-color = "rgba(251,252,253,0.3)" wind-power = "0" image = "false" width = "1366" height = "667" ></ canvas > < canvas class = "snow-canvas" speed = "2" interaction = "true" size = "6" count = "30" start-color = "rgba(253,252,251,1)" end-color = "rgba(251,252,253,0.3)" opacity = "0.00001" wind-power = "2" image = "false" width = "1366" height = "667" ></ canvas > < canvas class = "snow-canvas" speed = "3" interaction = "true" size = "12" count = "20" wind-power = "-5" image = "snow.png" width = "1366" height = "667" ></ canvas > |
如果需要使用雪花图片,可以在image
属性中设置,否则设置为false
。不使用图片时要设置雪花的开始色start-color
,结束色end-color
和透明度等属性。
初始化插件
$( ".snow-canvas" ).snow(); |
该插件可以在IE6+浏览器中正常运行,在IE6浏览器中使用<img>
来替代canvas。
网盘下载密码:875f