10 beaux exemples d'animation de particules dans la conception Web

Prenant d'assaut le Web, les animations de particules ont réussi à se tailler une place il y a plusieurs années. L'obsession actuelle massive pour les designs qui ont une ambiance high-tech et un décor géométrique en fait l'une des solutions les plus recherchées aujourd'hui.

En règle générale, l'animation de particules peut être vue dans les sections de héros comme, par exemple, dans JetUp Digital.

Comme vous pouvez le voir, c'est une façon élégante d'ajouter un certain piquant à la première impression, tout en séparant délicatement et discrètement le site Web de la foule.

Pour reproduire cet effet, votre première étape devrait être les particules.js.

C'est un plugin léger de Vincent Garreau qui est le cœur et l'âme de la majorité des animations de particules. De plus, dans son état d'origine, c'est l'une des solutions les plus copiées sur le Web - mais peut-être pas avec une intensité aussi élevée que dans l'exemple de l'auteur.

Généralement, les développeurs préfèrent des variantes plus soignées, modestes et calmes. Par exemple, consultez Canvas Particles de Romswell Roswell Parian Paucar. C'est une combinaison de particules et de parallaxe qui se traduit par une esthétique engageante et dynamique.

Cependant, cela ne signifie pas que l'approche se limite à ce type de réalisation. Considérez les particules dans l'espace de Dean Wagman, le système de particules CSS uniquement de Robin Selmer et, bien sûr, l'effet de poussée habilement reproduit et présenté dans un codepen d'Alex Safayan. Alors que le concept de Robin Selmer n'est qu'une pièce agréable à regarder; les deux autres nécessitent l'interaction de l'utilisateur, et c'est toujours passionnant.

Utiliser l'animation de particules pour impressionner

Au fil du temps, la technique a mûri. Du désordre chaotique de minuscules points blancs dispersés sur la toile, il s'est transformé en un outil à fort potentiel. Ce n'est pas quelque chose d'extraordinaire, mais il a un certain facteur wow. De plus, il contribue parfaitement à l'esthétique high-tech, géométrique et professionnelle - les complétant naturellement.

La prémisse est la suivante : l'animation de particules doit impressionner. Et les développeurs s'en tiennent à ce postulat contre vents et marées, en tirant le meilleur parti de celui-ci. Considérons quelques extraits de code phénoménaux créés par les vrais fans de cette solution.

30 000 particules par Justin Windle

Ici, le titre parle de lui-même. Avec 30 000 particules à bord, vous vous attendez à quelque chose de grandiose. Et Justin Windle a certainement répondu à nos attentes. Son concept est incroyable. Utilisez votre souris pour jouer. La physique est juste exceptionnelle. Cette version de l'animation de particules est très populaire parmi les développeurs, mais pas à une échelle aussi monumentale.

Poissons dans l'eau d'Alex Safayan

Alex Safayan a proposé presque la même solution, mais dans ce cas, les particules sont de plus en plus agrandies. Le curseur de la souris repousse également les points, formant une trace avec un effet d'entraînement subtil. Le comportement de l'animation rappelle le mouvement du poisson lorsqu'il est proche de la surface de l'eau. Notez la physique : l'interaction entre les points est bien pensée.

PLANCTON – La vie des particules par Marco Dell'Anna

Ayant reçu un prix pour le projet le plus chaleureux de 2017, Plankton mérite certainement l'attention. Le projet séduit non seulement par l'idée mais aussi par la réalisation. De la coloration subtile qui lui va comme un gant à un comportement magnifique qui semble incroyablement naturel, Marco Dell'Anna a le sens du détail.

STARDUST de Marco Dell'Anna

J'adore la magnifique ambiance rétro, les touches de néon et les couleurs magnifiques ici. C'est tellement difficile d'en détourner les yeux. Stardust est une symbiose de design et de codage qui se traduit par un chef-d'œuvre inspirant.

Points de gravité par Akimitsu Hamamuro

Akimitsu Hamamuro vous invite à ajouter des "points de gravité" dans son aire de jeux. Ils s'immiscent dans le mouvement chaotique des points et les attirent comme un aimant. Bien qu'ils ne jouent pas un rôle de centre d'orbite; pourtant, ils forment des points focaux qui forcent les particules à se déplacer dans leur direction.

Orbe de particules CSS par Nate Wiley

Les sphères sont des choix stylistiques très populaires pour les zones de héros de nos jours. Et le point de vue de Nate Willey sur cette tendance est assez impressionnant. L'orbe semble fragile grâce à de minuscules particules, et en même temps, ferme grâce à un comportement bien pensé. Sa routine de désintégration et de reformation de la sphère est fantastique.

Ondes de particules par Kevin Rajaram

Kevin Rajarm a pris la beauté et l'élégance de l'animation de particules et l'a améliorée avec la génialité de Three.js, apportant un concept délicat mais vraiment sophistiqué. Une vue imprenable sur les vagues semble futuriste, artificielle et fascinante.

Utilisations peu orthodoxes

Il existe des façons encore plus impressionnantes d'utiliser l'animation de particules. Sortons des sentiers battus et sortons des sentiers battus : l'approche peut facilement profiter à des éléments tels que les logotypes et les lettrages.

Logo de particules interactif par Tamino Martinius

Interactive Particle Logo en est un exemple typique. Cela ressemble à une solution réinventée de l'extrait de Justin Windle présenté ci-dessus. Bien qu'il n'y ait pas 30 000 points, il est composé d'un nombre impressionnant de particules qui forment habilement le mot « CODEPEN ». C'est l'un de ces cas où le concept a trouvé une utilisation pratique.

Texte aux particules par Louis Hoebregts

La version colorée de la solution précédente est disponible dans ce stylo de Louis Hoebregts. Ici, le texte est façonné par un millier de cercles pleins colorés qui sont enrichis par la même interactivité que dans l'exemple précédent.

Les particules écrivent un texte de Marco Dell'Anna

Bien que ce ne soit pas une entrée dramatique, il y a quelque chose d'envoûtant à ce sujet. L'animation fluide découvre lentement les personnages et éveille notre intérêt. Le concept a un certain flair mystérieux similaire à l'intro de "Stranger Things".

JUST DO IT par Marco Dell'Anna

Ceci est un autre chef-d'œuvre de Marco Dell'Anna. Cette fois, l'animation de particules participe à la formation d'un célèbre logotype Nike. D'obscure et semi-transparente à nette et solide, l'animation expose progressivement le logo, saisissant discrètement l'attention générale.

Texte de 404 particules par enrico toniato

Si vous pensez que la seule utilisation pratique de l'animation de particules est d'enrichir les sections de héros, alors Enrico Toniato vous prouvera le contraire. Son point de vue sur la page d'erreur est brillant. Suivez son idée et utilisez des particules mises en mouvement pour éviter que la page 404 ne paraisse ennuyeuse et repoussante.

Un effet qui attire l'attention

L'animation de particules est l'un de ces cas où plus petit est meilleur. Plus les points sont petits, plus l'effet obtenu est impressionnant. D'une part, cela semble sophistiqué et complexe puisque la géométrie et la physique sont impliquées. D'autre part, il semble fragile et subtil grâce à des formes délicates. Cette fusion unique rend l'animation de particules exceptionnelle et captivante.