首頁 > web前端 > html教學 > HTML5超逼真下雪場景效果

HTML5超逼真下雪場景效果

黄舟
發布: 2017-01-18 14:11:39
原創
2254 人瀏覽過

簡要教學

這是一個基於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)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板