Maison > interface Web > tutoriel HTML > le corps du texte

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

黄舟
Libérer: 2017-01-18 14:11:39
original
2211 Les gens l'ont consulté

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>
Copier après la connexion

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
});
Copier après la connexion

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


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal