Home  >  Article  >  Web Front-end  >  HTML5 ultra-realistic snow scene effect

HTML5 ultra-realistic snow scene effect

黄舟
黄舟Original
2017-01-18 14:11:392192browse

Brief Tutorial

This is a super realistic snow scene special effect based on jquery. This special effect uses jquery code to dynamically plug in the html5 canvas element, and then creates the snow special effect in the canvas.

Usage method

Introduce ThreeCanvas.js, jquery, Snow.js and snowFall.js files into the page.

<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>

Initialization plug-in

After the page DOM element is loaded, you can initialize the snow effect through the following method.

$.snowFall({
    //创建粒子数量,密度
    particleNo: 500,
    //粒子下落速度
    particleSpeed:30,
    //粒子在垂直(Y轴)方向运动范围
    particleY_Range:1300,
    //粒子在垂直(X轴)方向运动范围
    particleX_Range:1000,
    //是否绑定鼠标事件
    bindMouse: false,
    //相机离Z轴原点距离
    zIndex:600,
    //摄像机视野角度
    angle:55,
    wind_weight:0
});

Configuration parameters

  • particleNo: number and density of particles created.

  • particleSpeed: The speed at which particles fall.

  • particleY_Range: Particle movement range in the vertical (Y-axis) direction.

  • particleX_Range: Particle movement range in the vertical (X-axis) direction.

  • bindMouse: Whether to bind mouse events.

  • zIndex: The distance between the camera and the Z-axis origin.

  • angle: Angle.

  • wind_weight: The level of wind.

The above is the content of HTML5 ultra-realistic snow scene effect. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn