Animated backgrounds are a popular feature of modern websites. It is no longer a trend or something extraordinary. It is just one of the viable ways to adorn a hero area these days. Although there is still an issue with browser compatibility, the solution has managed to carve out a niche for itself.
There are different kinds of animations. You can stumble upon:
- Particle animations;
- Kaleidoscopic animations;
- Abstract 3D animations;
- Smooth geometric animations, and much more.
While several years ago constellation-inspired particle animations were ruling the roost, nowadays blob-shaped animations excite the minds of creative teams. What can you do? The liquid behavior is irresistible. The morphing routine that shows how a big drop smoothly moves in the space easily wins over the online audience and puts your website in the lead.
To benefit from this mainstream technique, we offer you a collection of outstanding code snippets that will give you a hint of how to build your own blob-shaped animation. You can do so with either traditional or brand-new tools. Now, let’s find the perfect match for your next project.
Uwe Chardon’s take on this popular solution is practical and inspiring. It features a simple, flat blob with a beautiful orange coloring and smooth edges placed in a clean environment. He managed to imitate the liquid behavior pretty well.
The result is a winning combination of a simple shape and intricate behavior that looks quite impressive.
The previous example depicts a traditional kind of blob with an irregular shape and relatively expressive morphing. However, this project by Ashton Holgate sticks to a more divine shape, which almost borders with the circle, and changes are barely noticeable. Nevertheless, it also looks outstanding.
The more so, the artist has also played with the text, forcing it to shift its color to the opposite one when it hits the bubble’s area.
Fabio Ottaviani has put into practice the playful nature of gooey behavior that is inherent to blob animations. His bubble is small, yet it produces quite an impact with its adorable morphing and funny bouncing.
It is pretty universal and neutral. Thus, it could become a perfect background animation for numerous projects.
This solution by Jeffrey is a winning combination of two trends. Here, you can find a spotty background that is highly popular these days and the liquid behavior that prevails over the other options.
Note, even though the blob occupies half of the scene, it does not overpower onlookers. The smooth, serene behavior stands behind this unobtrusiveness.
If one blob is not enough to produce a proper impression, then you can always go for a dozen of them. Charlotte Dann, with her ingenious code snippet, will show you how to do this without ruining the general effect and overwhelming visitors.
Her code snippet is just a treat for the eye. It features lots of small moving blobs that interact with each other. Each one looks like a little spot of light. Together, they form one huge blob that exudes warmth on all fronts.
Now, let’s move from the flat world into a 3-dimensional one.
Blob by Georgi Nikoloff is a point-in-case. It immediately strikes an eye with its vibrant coloring, high-tech appearance and dynamic behavior. The developer makes the most out of the advanced technologies, using WebGL, GLSL and shaders to his advantage. Even though the solution is subject to browser compatibility, it looks inspiring.
Daniel Del Core shows the online audience how to play with Simplex noise and spruce it up with some vigilantly reproduced textures. The result is a candy-inspired, paint-like ball. Although it moves pretty fast, it is so mesmerizing that it is difficult to take your eyes off of it right away.
Unlike the previous example, which has a bold personality and the charisma of a pop-star from the spandex-obsessed ‘80s, this one feels like a thing from the modest techno future. The blob is constructed from tiny particles that become brighter under some angles to achieve a 3D appearance.
Predictably, the artist employs Three.js magic and some ingenious work with procedural texture to pull off this concept.
We are going to end our collection with CSS Blob Generator by Edwin Chen. As the title states, this pen features a small playground where you can create a blob shape.
The Perfect Shape for a Calming Atmosphere
It is not surprising that the smooth and calm nature of liquid behavior is getting popular these days. Like a small mesmerising stream that runs through the forest, it lures you in and serves as an island of serenity in the ever-changing online world.
The blob-based animations are just destined to benefit modern projects. They are unobtrusive, even though they certainly command attention. Whether you go for elegant, flat realization or extravagant 3D, it will easily establish a calm atmosphere.
It will enrich the experience, adorn the background and, at the same time, give way to the content. These backgrounds will help you keep the balance between visual and textual data.
- 8 Snippets That Demonstrate the Repelling Effect in Web Design
- Bringing the Curtain Effect to Your Website with These Snippets
- 8 Fantastic Pure CSS Border Effect Code Snippets
- 10 Coded Animated Scenes for Halloween Design Inspiration
- Forge Your Own (Animation) Path with These Snippets
- Creating Liquid Effects on the Web
- Exploring the Beauty and Power of Volumetric Backgrounds in Web Design