Maison >interface Web >tutoriel HTML >Effet de scène de neige ultra-réaliste HTML5

Effet de scène de neige ultra-réaliste HTML5

黄舟
黄舟original
2017-01-18 14:11:392263parcourir

Bref tutoriel

Il s'agit d'un effet spécial de scène de neige super réaliste basé sur jquery. Cet effet spécial utilise le code jquery pour brancher dynamiquement l'élément de canevas html5, puis crée l'effet spécial neige dans le canevas.

Méthode d'utilisation

Introduisez les fichiers ThreeCanvas.js, jquery, Snow.js et snowFall.js dans la 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>

Plug-in d'initialisation

Une fois l'élément DOM de la page chargé, vous pouvez initialiser l'effet neige via la méthode suivante.

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

Paramètres de configuration

  • particleNo : nombre et densité des particules créées.

  • particleSpeed : la vitesse à laquelle les particules tombent.

  • particleY_Range : plage de mouvement des particules dans la direction verticale (axe Y).

  • particleX_Range : plage de mouvement des particules dans la direction verticale (axe X).

  • bindMouse : s'il faut lier les événements de la souris.

  • zIndex : La distance entre la caméra et l'origine de l'axe Z.

  • angle : angle.

  • wind_weight : Le niveau du vent.

Ce qui précède est l'effet de scène de neige ultra-réaliste HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn