10 exemples fantastiques d’arrière-plans blob animés 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 que l’un des moyens viables pour orner une zone de héros de nos jours. Bien qu’il y ait toujours un problème de compatibilité avec les navigateurs, la solution a réussi à se tailler une niche.

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

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

Il y a plusieurs années, des animations de particules inspirées des constellations régnaient sur le perchoir, de nos jours 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 le public en ligne et place votre site Web en tête.

Pour bénéficier de cette technique traditionnelle, nous vous proposons une collection d’extraits de code exceptionnels qui vous donneront un aperçu de la façon de créer votre propre animation en forme de goutte. Vous pouvez le faire avec des outils traditionnels ou tout nouveaux. Maintenant, trouvons la correspondance parfaite pour votre prochain projet.

La boîte à outils du concepteur Web

Téléchargements illimités: 1 000 000+ modèles Web, thèmes, plugins, éléments de conception et bien plus encore!

La vision d’Uwe Chardon sur cette solution populaire est pratique et inspirante. Il présente une goutte simple et 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 liquide.

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

Voir le stylo Animation Blob pure CSS par Uwe Chardon

L’exemple précédent représente un type de goutte traditionnel 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 frôle presque le cercle, et les changements sont à peine perceptibles. Néanmoins, il semble également exceptionnel.

D’autant plus que l’artiste a également joué avec le texte, le forçant à changer sa couleur vers l’autre en frappant la zone de la bulle.

Voir le stylo Goutte par Ashton Holgate

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

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 est HTML et CSS, car l’artiste n’utilise aucune magie JavaScript du tout. Intelligent.

Voir le stylo Chargeur de liquide rebondissant par Fabio Ottaviani

Contrairement à l’exemple précédent, cette baisse est purement générée par JavaScript. Soyez donc prêt à plonger dans une solution passionnante et à jouer avec les graphismes. De plus, le concept diffère des autres par son aspect primitif, ainsi que par un comportement assez doux et calme qui crée une atmosphère sereine globale.

C’est assez universel et neutre. Ainsi, il pourrait devenir une parfaite animation de fond pour de nombreux projets.

Voir le stylo Test de Canvas Blob par Shaw

Cette solution de Jeffrey est une combinaison gagnante de deux tendances. Ici, vous pouvez trouver un fond tacheté 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 printemps de base qui fait que l’interaction avec l’énorme goutte est réelle et non artificielle.

Notez, même si le blob occupe la moitié de la scène, il ne domine pas les spectateurs. Le comportement doux et serein se cache derrière cette discrétion.

Voir le stylo Goutte par Jeffrey

Si une goutte n’est pas suffisante pour produire une impression correcte, vous pouvez toujours en choisir une douzaine. Charlotte Dann, avec son ingénieux extrait de code, vous montrera comment procéder sans ruiner l’effet général et accabler les visiteurs.

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

Voir le stylo Blobs par Charlotte Dann

Passons maintenant du monde plat à un monde en trois dimensions.

Blob de Georgi Nikoloff est un bon exemple. Il frappe immédiatement par sa couleur 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 shaders à son avantage. Même si la solution est soumise à la compatibilité du navigateur, elle semble inspirante.

Voir le stylo goutte par Georgi Nikoloff

Daniel Del Core montre au public en ligne comment jouer avec 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 tellement fascinant qu’il est difficile de le quitter immédiatement.

Voir le stylo Expérience n ° 6 par Daniel Del Core

Contrairement à l’exemple précédent, qui a une personnalité audacieuse et le charisme d’une pop-star des années 80 obsédée 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 retirer ce concept.

Voir le stylo # 3Decembre blob de fausses particules par Eli Fitch

Nous allons terminer notre collection avec CSS Blob Generator par Edwin Chen. Comme le titre l’indique, ce stylo dispose d’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 stylo Générateur CSS Blob 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’île de sérénité dans un monde en ligne en constante évolution.

Les animations basées sur les blob sont juste 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, il établira facilement une atmosphère calme.

Il enrichira l’expérience, ornera l’arrière-plan et, en même temps, fera place au contenu. Ces antécédents vous aideront à maintenir l’équilibre entre les données visuelles et textuelles.

Close Menu