Boom! Examen des explosions dans la conception Web

Il existe de nombreuses façons d'attirer l'attention du public. Nous avons l'embarras du choix, même si l'état actuel des technologies est encore imparfait. Nous rencontrons des problèmes de compatibilité de navigateur, et tous les appareils ne peuvent pas gérer toutes ces solutions grandioses que les développeurs Web nous apportent.

Néanmoins, l'époque des sites Web statiques où les images étaient la principale force motrice et les curseurs avec des transitions fantaisistes étaient la seule épice est révolue. Nous assistons à une ère d'idées audacieuses et d'extravagances.

L'un des plus grands aspects est que les développeurs ne limitent pas leur attention aux grandes choses. Oui, nous pouvons voir de nombreuses animations sur toile, des expériences VR et vidéo écrasantes qui nécessitent un mode plein écran, etc. Cependant, aujourd'hui, même les plus infimes détails reçoivent leur propre dose d'attention.

Les sites Web regorgent de solutions microscopiques, en particulier celles basées sur le curseur de la souris. Nous pouvons tomber sur de nombreuses idées intelligentes. Ils sont fantastiques, mais dans la majorité des cas ils sont (quel est le mot que je cherche ?), « silencieux ». Je ne parle pas du fait qu'ils émettent des sons puisque certaines des solutions basées sur la souris émettent effectivement un son. Je parle de leur comportement.

Leur comportement est doux, calme et doux. Dans certains cas, il est si homogène qu'il est à peine perceptible. Et si vous êtes trop engagé dans le contenu ou s'il y a d'autres éléments distrayants, il y a de fortes chances que vous puissiez même les ignorer. Alors, pourquoi ne pas les rendre un peu plus « bruyants », pour que les utilisateurs ne ratent pas une occasion d'en profiter ?

Comment faire cela, vous pouvez demander. J'ai une bonne solution : faire exploser les choses – au propre comme au figuré.

Particules dans l'espace par Dean Wagman

Prenez, par exemple, ce fantastique extrait de code créé par Dean Wagman. Bien qu'il s'agisse de la première expérience de toile menée par Dean, elle est néanmoins très inspirante. Tout ce que tu as à faire est de cliquer n'importe où sur l'écran, et tu verras une explosion de centaines de petites particules brillantes qui volent droit sur ton visage. Même s'il ne fait pas de bruit, il semble certainement tumultueux.

Voir le stylo
Particules dans l'espace par Dean Wagman (@deanwagman).

Les effets d'explosion éveillent toujours le sentiment que quelque chose de fort s'est produit. Alors, pourquoi ne pas utiliser cela à notre avantage et ajouter du bruit sans produire de son réel ? De plus, nous avons ici une sélection d'extraits de code fantastiques. Découvrons-les ensemble.

Explosion de particules par Aleksei / Kaboomerz par Christopher Lis

Si la solution de Dean Wagman vous semble un peu trop, vous pouvez toujours essayer l'explosion de particules d'Aleksei. Ou si, au contraire, vous avez besoin d'avoir un impact plus significatif, vous pouvez toujours adopter Kaboomerz de Christopher Lis.

Le premier extrait de code présente une version "petit frère" de l'explosion de Dean, où des dizaines de minuscules particules forment une petite explosion qui apparaît et meurt rapidement. Dans le cas de Christopher Lis, vous serez surpris par la taille des particules. Les confettis qui émergent du curseur de la souris sont extrêmement énormes. Cependant, grâce à leur courte durée de vie, l'effet global n'est pas écrasant. C'est juste agréable.

Voir le stylo
Explosion de particules JS/CSS3 par Aleksei (@alek).

Voir le stylo
#Codevember 5 – Kaboomerz de Christopher Lis (@chriscourses).

Explosions DOM par David A.

Si vous aimez cette idée mais que vous avez besoin de quelque chose de plus numérique et d'inspiration rétro, il existe une solution étonnante créée par David. Il utilise des rectangles de différentes tailles au lieu de cercles pour obtenir une belle touche 8 bits. En conséquence, nous pouvons assister à une petite explosion avec le charisme des années 80.

Voir le stylo
Explosions DOM par David A. (@meodai).

WebGL brille par CreateJS

Si vous cherchez une version réaliste, WebGL Sparkles par CreateJS est un exemple parfait à considérer. Même si toutes les particules ici sont blanches, grâce au comportement bien pensé, cela ressemble à de véritables coups de feu de fête lorsque vous cliquez sur l'écran. De plus, le curseur a une belle traînée qui donne à la scène une touche de magie.

Voir le stylo
CreateJS : WebGL Sparkles par CreateJS (@createjs).

Lanceur automatique de feu d'artifice par Christopher Lis

En parlant de ça, notre collection d'explosions ne serait pas complète sans une dose de folie pyrotechnique. Automatic Firework Launcher de Christopher Lis est un exemple fantastique à considérer. C'est un lanceur de feu d'artifice caricatural. Grâce à des particules colorées et des formes ressemblant à des œillets, il nous rappelle de véritables feux d'artifice qui illuminent le ciel étoilé.

Voir le stylo
Jour 29 – Lanceur automatique de feu d'artifice par Christopher Lis (@chriscourses).

Concept de destruction de fenêtre modale par LegoMushroom

Les expériences sur toile ne sont pas les seules de notre liste. Les effets d'explosion peuvent être appliqués à divers éléments de l'interface, comme une fenêtre modale. LegoMushroom en est la preuve éclatante. Découvrez leur concept de fenêtre modale. Lorsque vous fermez la fenêtre, au lieu de simplement disparaître, elle se brise en plusieurs morceaux. C'est un complément parfait à tous ces sites Web fantaisistes entièrement illustrés qui sont très populaires de nos jours.

Voir le stylo
Concept de destruction de fenêtre modale par LegoMushroom (@sol0mka).

SCSS Explosion Effect par Sylvain Garnot / Explosion de texte SVG par Kacper Bawol / Explosion de texte Canvas par Tim Horwood

Les effets d'explosion peuvent également être bénéfiques pour la typographie. Considérez l'effet d'explosion SCSS de Sylvain Garnot, l'explosion de texte SVG de Kacper Bawol et l'explosion de texte Canvas de Tim Horwood.

Tous les trois démontrent un effet d'explosion appliqué au texte. Comme on pouvait s'y attendre, le curseur de la souris déclenche chacun d'eux.

Sylvain Garnot permet aux utilisateurs de faire exploser chaque lettre en une centaine de petits carrés. Le concept de Kacper Bawol est presque le même, mais cette fois le symbole se divise en petits triangles. Et, Tim Horwood permet aux utilisateurs de faire exploser tout le texte en minuscules particules qui finissent par revenir et tout remettre dans son état d'origine. Les trois idées sont tout simplement incroyables.

Voir le stylo
SCSS – Effet d'explosion par sylvain garnot (@sylvaingarnot).

Voir le stylo
Explosion de texte Svg par Kacper Bawol (@Casperovic).

Voir le stylo
Explosion de texte sur toile, cliquez pour voir par Tim Horwood (@tdhorwood).

Explosion de maison par Ko.Yelie

L'effet d'explosion peut également être appliqué aux images. Ce concept de Ko.Yelie en est un excellent exemple. En cliquant sur l'image, vous la faites exploser en petits morceaux. Bien qu'il soit difficile de trouver une application pour cela dans des interfaces réelles, il est toujours bon d'avoir à portée de main des solutions extraordinaires qui peuvent rendre les choses courantes uniques en leur genre.

Voir le stylo
Explosion de maison par Ko.Yelie (@ko-yelie).

Une fonction explosive

Un effet d'explosion est un outil controversé. Il n'est pas adapté à toutes les interfaces en raison de sa nature "explosive" et de son charisme puissant. Même s'il semble inoffensif et même neutre lorsqu'il est appliqué en tandem avec le curseur de la souris, il est assez "fort" - vous devez donc être prudent.

N'oubliez pas que tout le monde ne cherche pas à se divertir sur des sites Web. Et tout le monde n'est pas à la hauteur des extravagances et des impressions accablantes. En fin de compte, le contenu reste toujours le roi.

Cependant, si vous recherchez des moyens inhabituels de créer une interaction utilisateur passionnante, ludique et pour ainsi dire «forte», un effet d'explosion peut sans aucun doute être utile.