簡要教學
這是一個基於jquery的超逼真下雪場景特效。此特效使用jquery程式碼來動態外掛程式html5 canvas元素,然後在canvas中製作下雪特效。
使用方法
在頁面中引入ThreeCanvas.js、jquery和Snow.js和snowFall.js檔案。
<script src="path/to/ThreeCanvas.js"></script> <script src="path/to/jquery.min.js"></script> <script src="path/to/Snow.js"></script> <script src="path/to/snowFall.js"></script>
初始化插件
在頁面DOM元素加載完畢之後,可以透過下面的方法來初始化該下雪特效。
$.snowFall({ //创建粒子数量,密度 particleNo: 500, //粒子下落速度 particleSpeed:30, //粒子在垂直(Y轴)方向运动范围 particleY_Range:1300, //粒子在垂直(X轴)方向运动范围 particleX_Range:1000, //是否绑定鼠标事件 bindMouse: false, //相机离Z轴原点距离 zIndex:600, //摄像机视野角度 angle:55, wind_weight:0 });
配置參數
particleNo:建立粒子數量,密度。
particleSpeed:粒子下落的速率。
particleY_Range:粒子在垂直(Y軸)方向上移動範圍。
particleX_Range:粒子在垂直(X軸)方向運動範圍。
bindMouse:是否綁定滑鼠事件。
zIndex:相機離Z軸原點距離。
angle:角度。
wind_weight:風的等級。
以上就是HTML5超逼真下雪場景效果的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!