8 extraits qui démontrent l'effet répulsif dans la conception Web

Les expériences avec la toile sont le sujet de conversation de la ville ces jours-ci. Ils peuvent être considérés non seulement comme des concepts dans les terrains de jeux populaires des développeurs Web, mais aussi comme des solutions pour des projets réels. La variété est sans aucun doute étonnante : des animations de particules primitives basées sur des plugins populaires aux idées uniques qui sont une fusion d'outils modernes et éprouvés.

Aujourd'hui, nous attirons votre attention sur l'effet répulsif. Même s'il a un comportement répulsif, il a certainement un caractère attractif. Encourageant les utilisateurs à jouer avec les détails du décor en les poussant dans différentes directions, voire dans certains cas, en soufflant même tout, cela devient instantanément le divertissement principal. Cela rend l'expérience utilisateur agréable et excitante.

Explorons une collection de démos inspirantes avec des extraits de code afin que vous puissiez voir la tendance unique par vous-même.

Repousser les lignes

A première vue, cette démo fait penser à un jeu de cordes de guitare. Déplacez votre curseur dessus et vous verrez la magie. Les lignes commencent à se plier et à se déformer, formant une petite sphère.

Le panneau d'options sur la droite vous permet de contrôler l'effet. Vous pouvez définir le rayon de la portée de la souris, ajouter ou réduire le nombre de lignes ou modifier la distance entre les cordes. Notez la physique. Il est bien pensé et soigneusement reproduit.

Voir le Pen Repeling Lines de Daniel Velasquez

30 000 particules

L'effet répulsif est tout simplement génial lorsqu'il est appliqué à des milliers de points au lieu de lignes. Justin Windle le prouve dans la pratique. Son projet emblématique et très populaire sur CodePen comprend un panneau où 30 000 minuscules particules s'assoient confortablement.

Ils sont étroitement emballés ensemble pour créer une surface dense. Passez le curseur de la souris dessus et vous verrez comment les points s'éloignent de vous. Bien qu'ils ne disparaissent pas de la vue, ils sont retenus par la portée de la souris. Par conséquent, vous pouvez voir un cercle creux relativement grand où les points forment la bordure.

Voir le stylo 30 000 particules de Justin Windle

Particules interactives

Si le simple cadre rectangulaire n'inspire pas votre créativité, vous pouvez toujours rassembler tous ces points en caractères comme l'a fait Tamino Martinius dans son projet Interactive Particles.

Sa démo comprend un mot, où chaque lettre est construite à partir de centaines de points. Soufflez-les avec le curseur de votre souris pour pimenter les choses. Il y a un petit centre de contrôle où vous pouvez modifier les paramètres de l'expérience et l'ajuster à vos préférences.

Voir le logo Pen Interactive Particle de Tamino Martinius

Texte en particules

Jouons avec la couleur et la taille pour enrichir les deux concepts précédents avec quelques rebondissements animés comme Louis Hoebregts l'a fait dans son projet Text to Particles.

Contrairement à la solution de Tamino Martinius, ici les points ont des rayons différents ainsi que des couleurs différentes. De plus, vous pouvez modifier le texte en le définissant à l'aide de l'entrée. Le curseur de la souris a un comportement doux et doux qui disperse la foule et entraîne une petite perturbation dans la cour de récréation. C'est une démo vraiment agréable à regarder.

Voir le texte du stylo sur les particules de Louis Hoebregts

Boules et gravité

L'effet répulsif peut être facilement combiné avec d'autres solutions basées sur la physique pour obtenir des résultats exceptionnels. Considérez les balles et la gravité.

Le nom du projet dit tout. La gravité, ainsi que l'effet répulsif, sont au cœur du concept, ce qui rend l'expérience intrigante.

Contrairement aux exemples précédents, ici, vous devez saisir le cercle et l'utiliser comme un instrument pour repousser les autres cercles. Vous pouvez presque frapper ces boules plates colorées, les forçant à bouger. De plus, vous devez combattre la gravité, ce qui rend l'expérience encore plus excitante.

Voir le Stylo BALLS&GRAVITY de Marco Dell'Anna

Attracteur

Ce projet de Marco Dell'Anna est également construit autour de la gravité. Vous pouvez le contrôler avec le curseur de votre souris. Utilisez-le pour déplacer les particules et réorganiser leur position.

Notez que même si les particules changent de position, elles s'efforceront toujours de revenir dans le cercle. Donc ici, vous pouvez voir un curseur de souris qui joue le rôle d'un aimant, et en même temps, un outil pour repousser les points (au moins temporairement).

Voir l'attracteur de stylo – MatterJS par Marco Dell'Anna

Activer

Activate est un stylo exceptionnel créé par Gérard Ferrandez. Tout comme dans l'exemple précédent, l'auteur a également opté en faveur de la gravité. Cette fois, il est combiné avec un comportement fluide et bien sûr l'effet répulsif. En conséquence, le projet nous attire avec son apparence folâtre et sa nature ludique.

Voir l'activation du stylo par Gérard Ferrandez

Plasma moar

L'effet répulsif peut également être d'une grande aide pour les animations de particules. Vous pouvez les rendre encore plus excitants. Jetez un coup d'œil à Moar Plasma.

Ici, vous pouvez voir une animation chaotique où le curseur de la souris effraie toutes les particules en les poussant vers différents côtés. Vous pouvez non seulement profiter de la démo, mais aussi interagir avec elle.

Voir le Pen Moar Plasma de John Chin-Jew

Particules neigeuses

Snowy Particles est un autre excellent exemple où l'animation traditionnelle des particules est améliorée. Nat, l'auteur du stylo, a utilisé deux astuces.

Tout d'abord, le curseur de la souris a le pouvoir de transformer de simples points en flocons de neige, de sorte que la scène semble véritablement magique. Deuxièmement, un petit effet répulsif est ajouté qui disperse légèrement la masse neigeuse afin que vous puissiez voir des flocons de neige distinctifs. Tout simplement fantastique.

Voir le stylo particules.js neige de Nat

Répulsifs

Un autre domaine où l'effet répulsif apporte des avantages et convertit facilement une scène terne en une extravagance est celui des effets de texte. Nous avons déjà vu à quel point les mots créés à partir de mille points semblent exceptionnels. Il est temps de changer les points en lignes et de pimenter le tout avec l'effet répulsif. Considérer Les répulsifs au cas où.

Le projet présente un mot où les symboles sont constitués de lignes courtes et fines qui s'adressent aux téléspectateurs. De cette façon, vous pouvez presque sentir sa nature volumétrique. Saisissez le curseur de votre souris et faites-le glisser sur le texte, et vous verrez comment les lignes commencent à danser.

Leur comportement est fluide et agréable à regarder, même si le texte lui-même semble un peu pointu et aigu. De plus, les lignes bougent également d'elles-mêmes, on a donc l'impression qu'il y a une petite brise qui fait bouger certaines parties de la composition. En conséquence, vous pouvez profiter d'un véritable chef-d'œuvre où le texte simple dirige le spectacle.

Voir les stylos répulsifs de Rein van der Woerd

Attraction par répulsion

Même si l'effet répulsif est utilisé pour repousser les détails de la composition, il reste tout de même totalement magnétique. Vous ne pouvez pas en détacher les yeux. Il attire instantanément l'attention avec son comportement ludique et pousse les utilisateurs à interagir avec la scène.

L'effet répulsif n'est pas seul dans sa lutte pour gagner le public. Il collabore parfaitement avec d'autres types d'animations et d'effets apportant des solutions uniques et accrocheuses.