Among the most sought-after and complicated effects are liquid simulations. To do it right, it takes power – from both code and processors. Luckily, those items are no longer in short supply.
Thus, we’ve found a number of examples of liquid effects that are out of this world. Some look eerily realistic, while others are more reminiscent of a sci-fi fantasy. Let’s take a look:
The Blob Comes Alive
This rippling, liquid mass is mesmerizing to look at. But when you find out that it’s also interactive, it becomes even more impressive. The blob rotates along with your cursor, giving this WebGL-powered snippet the appearance of being a sphere that’s floating out in space.
Sorry, I Prefer a Shiny Blob
Staying with the spherical theme, this example demonstrates a more well-formed liquid. And, even though we don’t see things like this floating around (well, not on Earth, anyway) the shiny texture and blue color project a realistic look. The checkered pattern within the liquid also helps here, as it gives off a swimming-pool vibe.
Wiggly, Jiggly Button
A Drop in the Button
There is a lot of talk about microinteractions these days. Those little details can do wonders for the user experience. Take this humble radio button. When clicking it, you get more than just a plain old dot in the middle. In this instance, the button uses a neat animation to make it look as though a drop of liquid has filled in your choice. It’s simple, quick and effective.
Juice Me Up
Inspired by an Android charging animation, this snippet offers gentle waves and a generous helping of bubbles. Using the slider, you can raise or lower the fill level. Toggle switches let you change the color and the type of bubbles you want to see.
Creature of the Deep
This example is multifaceted, as it offers several viewing angles. It starts off in a purple fog, with a rippling blue mass underneath. Then, it zooms in, revealing tall, shifting gobs of slime. If that isn’t enough to keep your interest, the settings are also easily tweaked. This Three.js creation makes for a great scuba diving simulator – if you’re diving on another planet, that is.
Morphing Liquid Rainbow Experience
Pour Out Some Amazing Effects
It used to be that even attempting a liquid simulation was a questionable choice. The effects weren’t all that great and most users didn’t have enough horsepower to view them, anyway. That’s all changed in recent years.
You no longer need to rely on resource-hogging browser plugins to create something realistic. In fact, the solutions we have at our disposal are cross-browser and relatively lightweight. That gives you the freedom to experiment and let those liquid effects spill into your projects.
- Forge Your Own (Animation) Path with These Snippets
- Code as an Ode to Hackers
- 10 Dramatic Examples of Splash Screens in Web Design
- Using Images to Enhance the CSS Hover Effect
- Attack of the Blob-Based Animated Backgrounds in Web Design
- 8 Creative Snippets for Creating Pixelated Backgrounds
- Share Your Story with These Terrific Timelines
- On the Downlow(res): A Showcase of CSS Pixel Art