La création de Chute de Neige en utilisant le HTML 5 et javascript
J'ai visité le Pile d'Échange d'Hiver Bash site web et j'aime la neige qui tombe! Ma question est, comment puis-je recréer un effet similaire qui a l'air sympa. J'ai tenté de désosser le code pour voir si je pouvais le comprendre, mais hélas pas de chance là-bas. Le JS est au dessus de ma tête. J'ai fait un peu de recherche sur google et suis tombé sur quelques exemples mais ils n'étaient pas aussi élégant que la SE site ou n'a pas l'air très bien.
Quelqu'un peut-il donner quelques instructions sur la façon de reproduire ce que l'Hiver SE Bash site crée ou un endroit où je pourrais apprendre à faire cela?
Edit: j'aimerais reproduire l'effet le plus près possible, c'est à dire: les chutes de neige avec des flocons de neige, et d'être en mesure de déplacer la souris et la cause de la neige, de déplacer ou de turbulence avec la souris moments.
- Êtes-vous juste d'avoir de la neige en flocons-la chute de l'effet ou aussi pour les infobulles de la fonctionnalité?
- De préférence les deux, j'ai édité question afin de refléter ce que je suis à la recherche d'.
- J'ai réussi à éliminer l'effet de neige à partir du reste du code. Avez-vous voulez que je poste ou que vous êtes à la recherche d'un "savoir-faire: le faire vous-même? En gros, c'est beaucoup de maths qui simule la chute de neige et autres goodies.
- On dirait qu'il est à la recherche d'accepter de mauvaises réponses 😛
- Aller de l'avant et l'après comment ils ont fait. Si vous souhaitez ajouter quelques conseils et quelques-uns vous-même les pensées, aller pour elle. =>
- J'ai regardé à travers la source de moi-même, mais vous n'avez pas trouvé d'obfuscation/minifiés code très instructif. Ce serait bien si vous pouviez poster avec un peu d'explication et de l'onu-minifiés les noms de variables 🙂
- J'ai dit que je éliminées de la neige code de le code des autres, mais je n'ai jamais dit, j'ai réussi à lui donner un sens ou de l'onu-minify il. Qui pourrait prendre des jours! 🙂
- Poste en tant que wiki réponse, nous allons voir ce que nous pouvons faire 🙂
- J'ai été totalement attend quelqu'un pour poser cette question.
- Pour info, j'ai l'intention de publier la winterba.sh la neige chose de l'open source. Je mettrai à jour quand j'ai.
- Wow! Merci pour tous les Cadeaux de Noël, la neige n'a jamais été aussi belle...et bien, je suis dans le Colorado (etats-unis).
- génial j'ai hâte de voir ça. Principalement dans la façon dont vous gérer la rotation des flocons, je pense que j'ai une idée sur vous vous le faites, mais aimerait voir le code 😛
Vous devez vous connecter pour publier un commentaire.
La grande question, j'ai en fait écrit une neige plugin il y a un moment que je ne cesse de mettre à jour le voir en action. Également un lien vers le pur js source
J'ai remarqué que vous tagged la question html5 et canvas, cependant vous pouvez le faire sans aide, et juste des éléments standard avec des images ou des couleurs de fond différentes.
Ici deux très simples, je les ai mis ensemble juste maintenant pour vous de jouer avec. La clé, à mon avis, est à l'aide de péché pour obtenir le bon effet ondulé comme les flocons tomber. La première utilise l'élément canvas, la 2ème on utilise régulièrement des éléments du dom.
Depuis que je suis absolument accro à la toile, voici une toile version qui effectue assez bien à mon avis.
Toile version
Plein Écran
Élément Standard version
La neige qui tombe est simple: Créer une toile, créer un tas de flocons de neige, de les dessiner.
Vous pouvez créer un flocon de neige de la classe comme ceci:
Ou quelque chose comme ça. Ensuite, vous avez une minuterie qui, à chaque étape, ajuste chaque flocon de neige en direction d'une petite quantité, puis calcule sa nouvelle X et Y par la prise en compte de la Vitesse et de la Direction.
C'est difficile à expliquer, mais en fait assez basique.