Creating Liquid Effects on the Web

Special effects have been used in web design for years (Flash, anyone?). But today’s technology affords designers better ways to integrate them into our projects. Between CSS3, a host of JavaScript libraries and users with powerful hardware, we have all the resources we need to create compelling effects.

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

While it’s tempting to think of liquid effects in terms of a full-screen presentation, it can also work in smaller forms. This button looks ordinary at first, but upon hover it becomes a quivering hunk of JELL-O. It’s seriously fun to play with! While the amount of JavaScript it takes to power this little guy may be impractical for real-world use, it does show that a small UI element can make a big impact.

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.

Liquid Loader

The loading graphic is one of the long-standing traditions in web design. So much so that it almost gets a little boring. But this liquid-filled example is both unique and fun. It would be the perfect compliment for say, a beverage company or pub. Best of all, no JavaScript required!

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

Here is a perfect mesh of retro and modern. On one hand, you have the far-out sight of a shifting liquid rainbow – a classic 1960s look. But it wouldn’t be possible without the use of GLSL shading. The animation is incredibly smooth and takes only 60 lines of JavaScript to achieve.

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.

The post Creating Liquid Effects on the Web appeared first on Speckyboy Web Design Magazine.