Créer une animation de neige ou de particules en CSS3

Je vous propose aujourd’hui une animation de particules dans un tuto qui affichera une chute de neige en boucle. Il existe souvent une foule de solutions pour ce genre d’animation. Je vous présente une solution en CSS3 en utilisant la propriété animation et les séquences de keyframes.

Logique de l’animation

Avant de toucher au code, analysons comment rendre réaliste l’animation et schématiser les plans dont nous aurons besoin.
Regardons le schéma ci-dessous :

Nous remarquons une silhouette humaine, un cône représentant son champs de vision ainsi que trois sphères de même dimension à trois distances différentes.
Dans le principe, le schéma devrait suffire à illustrer l’ensemble de la logique de l’animation que nous allons mettre en place. Les trois sphères représentent les trois niveaux de calques que nous allons animer. Remarquez ces détails :

1. Une sphère occupe une portion plus importante du champs visuel quand elle est proche et nettement moindre lorsqu’elle est distante. On peut donc conclure facilement que nos particules devront être représentées plus grosses pour le calque proche de nos yeux et plus fines au fur et à mesure qu’elles s’éloignent.
2. Si toutes les sphères tombent à une même vitesse, la sphère proche de la silhouette restera moins longtemps dans le champs que la sphère éloignée. Pour une animation à l’écran cela voudra dire que le calque « proche » devra passer plus rapidement à l’écran et nous ralentirons les calques qui sont censés être plus distants.

Conclusion : les particules proches seront plus grosses et plus rapides, alors qu’en s’éloignant, les autres calques de particules seront fins et lents.

Listons nos besoins

Le principe de l’animation acquis, vous devriez vous rendre compte que vous allez donc avoir besoin de quatre surfaces de calque (du plus profond au plus proche) :

• un fond (illustration, photo, aplat contrasté, etc)
• nos particules fines (attention à la pollution !)
• nos particules moyennes
• nos particules larges

Sur ce tuto, cela devrait vous donner ces 4 images (attention c’est un jpeg tout bête) :

Attention ici, chaque image est travaillée de telle sorte qu’aucune particule (ici les flocons) ne soient coupée sur leurs bordures. Pour que ce travail soit fait efficacement je vous invite à utiliser l’outil Translation de Photoshop (Filtres > Divers).

Passons au code

Du côté du code HTML, nous allons simplement insérer dans body un conteneur avec 3 items à l’intérieur.
Côté body

<div class="illustration">
	<div class="i-large"></div>
	<div class="i-medium"></div>
	<div class="i-small"></div>
</div>

Voici en quelques lignes notre animation.

.illustration {
	position: relative;
	margin: 0 auto;
	width : 716px;
	height: 413px;
	background : url("./illustration.jpg") no-repeat top center;
}
 
.i-large,
.i-medium,
.i-small {
	position : absolute;
	top: 0; right: 0; bottom: 0; left: 0;
}
 
.i-large {
	background: url("./particules_large.png") repeat 0px 0px;
	-webkit-animation: dropFlowParticles 2s linear infinite;
	     -o-animation: dropFlowParticles 2s linear infinite;
	        animation: dropFlowParticles 2s linear infinite;
}
.i-medium {
	background: url("./particules_medium.png") repeat 0px 0px;
	-webkit-animation: dropFlowParticles 12s linear infinite;
	     -o-animation: dropFlowParticles 12s linear infinite;
	        animation: dropFlowParticles 12s linear infinite;
}
.i-small {
	background:url("./particules_small.png") repeat 0px 0px;
	-webkit-animation: dropFlowParticles 27s linear infinite;
	     -o-animation: dropFlowParticles 27s linear infinite;
	        animation: dropFlowParticles 27s linear infinite;
}
 
@-webkit-keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}
@keyframes dropFlowParticles {
	from { background-position: 0 0; }
	to { background-position: 0 413px; }
}

Voir un aperçu de l’animation CSS3

Aller plus loin

Le tuto présente une animation extrêmement simple avec une seul séquence keyframes. Lors de vos animations, augmenter les étapes, changer les directions et multiplier les séquences permet d’augmenter le réalisme. Mais attention, c’est à utiliser si vous maîtrisez bien le schéma de votre animation. Par exemple, lors d’une animation de particules de braises pour un feu il est probable que ces dernières volent dans tous les sens, faire varier les directions et les durées, voire les transparences, rendrait l’animation très réaliste.

Sur notre tuto, remarquez que les flocons proches sont floutés, lorsque le regard se pose sur un paysage lointain, il normal que les éléments proches de notre regard ne soient pas identifiés clairement, le flou traduit ce focus sur l’arrière plan.

Note : Ne vous amusez pas à placer ce genre d’animation sur la totalité de votre site Web, ça n’est pas l’objet de cette proposition d’animation ! Bonnes fêtes !