Attaque des arrière-plans animés basés sur le blob dans la conception Web

Les arrière-plans animés sont une caractéristique populaire des sites Web modernes. Ce n'est plus une tendance ou quelque chose d'extraordinaire. Ce n'est qu'un des moyens viables d'orner une zone de héros de nos jours. Bien qu'il y ait toujours un problème de compatibilité avec le navigateur, la solution a réussi à se tailler une place.

Il existe différents types d'animations. Vous pouvez tomber sur :

• animations de particules ;
• Animations kaléidoscopiques ;
• Animations 3D abstraites ;
• Des animations géométriques fluides, et bien plus encore.

Alors qu'il y a plusieurs années, les animations de particules inspirées des constellations dominaient, aujourd'hui, les animations en forme de goutte excitent l'esprit des équipes créatives. Que pouvez-vous faire? Le comportement liquide est irrésistible. La routine de morphing qui montre comment une grosse goutte se déplace en douceur dans l'espace gagne facilement l'audience en ligne et place votre site Web en tête.

Pour bénéficier de cette technique courante, nous vous proposons une collection d'extraits de code exceptionnels qui vous donneront une idée de la façon de créer votre propre animation en forme de blob. Vous pouvez le faire avec des outils traditionnels ou tout nouveaux. Maintenant, trouvons le match parfait pour votre prochain projet.

Animation blob par Uwe Chardon

Le point de vue d'Uwe Chardon sur cette solution populaire est pratique et inspirant. Il présente une simple goutte plate avec une belle coloration orange et des bords lisses placés dans un environnement propre. Il a réussi à imiter assez bien le comportement du liquide.

Le résultat est une combinaison gagnante d'une forme simple et d'un comportement complexe qui semble assez impressionnant.

Voir l'animation Pen Blob en pur CSS par Uwe Chardon

Blob par Ashton Holgate

L'exemple précédent représente un type traditionnel de blob avec une forme irrégulière et un morphing relativement expressif. Cependant, ce projet d'Ashton Holgate s'en tient à une forme plus divine, qui borde presque le cercle, et les changements sont à peine perceptibles. Néanmoins, il semble également exceptionnel.

De plus, l'artiste a également joué avec le texte, l'obligeant à décaler sa couleur vers la couleur opposée lorsqu'il touche la zone de la bulle.

Découvrez le Pen Blob d'Ashton Holgate

Bouncing Liquid Loader par Fabio Ottaviani

Fabio Ottaviani a mis en pratique la nature ludique du comportement gluant inhérent aux animations blob. Sa bulle est petite, mais elle produit tout un impact avec son adorable morphing et ses rebonds amusants.

Bien que la plaque signalétique du projet de stylo indique «Loader», elle peut facilement être transformée en un détail décoratif de l'arrière-plan. Et pour ce faire, tout ce que vous devez savoir, c'est HTML et CSS, car l'artiste n'utilise aucune magie JavaScript. Intelligent.

Voir le Pen Bouncing Liquid Loader de Fabio Ottaviani

Canvas Blob Test par Shaw

Contrairement à l'exemple précédent, cette goutte est purement générée par JavaScript. Soyez donc prêt à plonger dans une solution passionnante et un jeu complexe avec les graphismes. De plus, le concept se distingue des autres par son look primitif, accompagné d'un comportement assez doux et calme qui apporte une atmosphère sereine à l'ensemble.

C'est assez universel et neutre. Ainsi, il pourrait devenir une animation d'arrière-plan parfaite pour de nombreux projets.

Voir le test Pen Canvas Blob de Shaw

Blob par Jeffrey

Cette solution de Jeffrey est une combinaison gagnante de deux tendances. Ici, vous pouvez trouver un fond tacheté qui est très populaire de nos jours et le comportement liquide qui prévaut sur les autres options.

L'extrait de code est fait avec HTML, CSS et JavaScript. Il semble cohérent sur différents navigateurs et appareils. L'artiste utilise un algorithme de ressort de base qui rend l'interaction avec l'énorme blob réelle et non artificielle.

A noter que même si le blob occupe la moitié de la scène, il n'accable pas les badauds. Le comportement doux et serein se cache derrière cette discrétion.

Voir le Pen Blob de Jeffrey

Blobs par Charlotte Dann

Si une goutte ne suffit pas pour produire une bonne impression, vous pouvez toujours en choisir une douzaine. Charlotte Dann, avec son ingénieux extrait de code, vous montrera comment faire cela sans ruiner l'effet général et submerger les visiteurs.

Son extrait de code est juste un régal pour les yeux. Il comporte de nombreuses petites gouttes mobiles qui interagissent les unes avec les autres. Chacun ressemble à une petite tache de lumière. Ensemble, ils forment une énorme goutte qui respire la chaleur sur tous les fronts.

Découvrez les Pen Blobs de Charlotte Dann

Passons maintenant du monde plat à un monde tridimensionnel.

Blob de Georgi Nikoloff

Blob de Georgi Nikoloff en est un exemple. Il frappe immédiatement l'œil avec sa coloration vibrante, son apparence high-tech et son comportement dynamique. Le développeur tire le meilleur parti des technologies avancées, en utilisant WebGL, GLSL et les shaders à son avantage. Même si la solution est soumise à la compatibilité du navigateur, elle semble inspirante.

Voir le stylo blob de Georgi Nikoloff

Expérience #6 par Daniel Del Core

Daniel Del Core montre au public en ligne comment jouer avec le bruit Simplex et l'embellir avec des textures reproduites avec vigilance. Le résultat est une boule de peinture inspirée des bonbons. Bien qu'il se déplace assez rapidement, il est si fascinant qu'il est difficile de le quitter des yeux tout de suite.

Voir l'expérience du stylo #6 par Daniel Del Core

Faux blob de particules par Eli Fitch

Contrairement à l'exemple précédent, qui a une personnalité audacieuse et le charisme d'une pop-star des années 80 obsédées par le spandex, celui-ci ressemble à une chose du futur techno modeste. Le blob est construit à partir de minuscules particules qui deviennent plus brillantes sous certains angles pour obtenir une apparence 3D.

Comme on pouvait s'y attendre, l'artiste utilise la magie de Three.js et un travail ingénieux avec une texture procédurale pour réaliser ce concept.

Voir le Pen #3December fausse goutte de particules par Eli Fitch

Générateur CSS Blob par Edwin Chen

Nous allons terminer notre collection avec CSS Blob Generator d'Edwin Chen. Comme le titre l'indique, ce stylo comporte une petite aire de jeux où vous pouvez créer une forme de goutte.

Vous trouverez ici un petit panneau où vous pouvez attribuer un rayon à chaque bordure. Bien qu'il soit statique et plat, vous pouvez facilement copier le résultat et le mettre en mouvement à l'aide de JavaScript.

Voir le Pen CSS Blob Generator par Edwin Chen

La forme parfaite pour une atmosphère apaisante

Il n'est pas surprenant que la nature douce et calme du comportement liquide devienne populaire de nos jours. Comme un petit ruisseau fascinant qui traverse la forêt, il vous attire et sert d'îlot de sérénité dans le monde en ligne en constante évolution.

Les animations basées sur le blob sont simplement destinées à bénéficier aux projets modernes. Ils sont discrets, même s'ils attirent certainement l'attention. Que vous optiez pour une réalisation élégante et plate ou une 3D extravagante, elle instaurera facilement une atmosphère sereine.

Il enrichira l'expérience, ornera l'arrière-plan et, en même temps, laissera la place au contenu. Ces arrière-plans vous aideront à maintenir l'équilibre entre les données visuelles et textuelles.