8 Recursos CSS y JS para Incluir un Efecto Liquido en la Web

Los efectos especiales se han utilizado en el diseño web durante años (Flash, ¿estas por ahí?). Pero la tecnología de hoy ofrece a los diseñadores mejores formas de integrarlos en nuestros proyectos. Entre el CSS3, una gran cantidad de bibliotecas de JavaScript y los usuarios con un hardware potente, tenemos todos los recursos que necesitamos para crear efectos atractivos.

Entre los efectos más buscados y complicados se encuentran las simulaciones de líquidos. Para hacerlo bien hay que tirar tanto de código especifico, como de procesadores.

Afortunadamente, estos recursos ya no escasean.

Por lo tanto, hemos encontrado una serie de ejemplos de efectos líquidos que están fuera de este mundo. Algunos parecen inquietantemente realistas, mientras que otros recuerdan más a una fantasía de ciencia ficción. Vamos a verlos a continuación:

El Blob cobra vida

See the Pen
Blob study by Liam Egan (@shubniggurath)
on CodePen.

Este efecto de ondulación con la masa líquida es fascinante para mirar. Pero cuando descubres que también es interactivo, se vuelve aún más impresionante. El blob gira junto con el cursor, dando a este fragmento de código alimentado con WebGL, la apariencia de ser una esfera que está flotando en el espacio.

El Blob que gira

See the Pen
Shiny Blob | CodePenChallange by Tibix (@Tibixx)
on CodePen.

Continuando con el tema esférico, este ejemplo muestra un líquido más bien formado.  A pesar de que no vemos cosas como estas flotando (bueno, al menos no en la Tierra), la textura brillante y el color azul proyectan un aspecto realista. El patrón a cuadros dentro del líquido también ayuda a este concretamente, ya que emite un ambiente de piscina.

Botón Wiggly, Jiggly

See the Pen
Liquid button by Waaark (@waaark)
on CodePen.

Si bien es tentador pensar en efectos líquidos en términos de una presentación a pantalla completa, también puede funcionar en formas más pequeñas. Este botón parece normal al principio, pero al pasar el ratón se transforma con un efecto tembloroso tipo gelatina. Es realmente divertido jugar con el.

Si bien la cantidad de JavaScript que se necesita para alimentar a este pequeño individuo puede ser poco práctico para el uso en el mundo real, muestra que un pequeño elemento en la interfaz del usuario, puede tener un gran impacto.

Una gota en el botón

See the Pen
Liquid Radio Button using SVG and GSAP (GreenSock) by Ryan LaBar (@ryan_labar)
on CodePen.

Se habla mucho sobre microinteracciones en estos días. Esos pequeños detalles pueden hacer maravillas para la experiencia del usuario, como podemos ver con este humilde botón de radio. Al hacer clic en él, obtienes más que un simple punto en el medio. En este caso, el botón utiliza una animación ordenada para que parezca que se ha llenado una gota de líquido en su elección. Es simple, rápido y efectivo.

Cargador de liquido

See the Pen
Liquid Loader by Onno (@Penno)
on CodePen.

El gráfico de carga es una de las tradiciones más antiguas en diseño web. Tanto es así que casi se vuelve un poco aburrido. Pero este ejemplo lleno de líquido es único y divertido. Sería el complemento perfecto para, por ejemplo, una empresa de bebidas o un pub. Lo mejor de todo es que no requiere JavaScript.

Juice Me Up

See the Pen
liquid by Arturo Morán (@Armolp)
on CodePen.

Inspirado en una animación de carga de Android, este fragmento ofrece olas suaves y una generosa porción de burbujas. Con el control deslizante, puedes subir o bajar el nivel de llenado. Los interruptores de palanca permiten cambiar el color y el tipo de burbujas que deseas ver.

Criatura de las profundidades

Este ejemplo es multifacético, ya que ofrece varios ángulos de visión. Comienza en una niebla púrpura y con una masa azul ondulada debajo. Luego se acerca revelando tallos altos y cambiantes de limo. Si eso no es suficiente para mantener tu interés, la configuración también se puede modificar fácilmente. Esta creación de Three.js lo convierte en un gran simulador de buceo: si estás buceando en otro planeta, claro está.

Experiencia de arco iris líquido cambiante

See the Pen
Liquid Rainbow | GLSL by Johan Karlsson (@DonKarlssonSan)
on CodePen.

Aquí aparece una malla perfecta entre retro y moderno. Por un lado, tiene la visión lejana de un arco iris de líquido cambiante, un aspecto clásico de los años sesenta. Pero no sería posible sin el uso de sombreado GLSL. La animación es increíblemente suave y solo requiere 60 líneas de JavaScript.

Terminando

No hace mucho tiempo el intentar una simulación líquida era una opción cuestionable. Los efectos no fueron tan buenos y la mayoría de los usuarios no tenían suficiente potencia para verlos. Todo eso ha cambiado en los últimos años y no tardarán en aparecer en muchos sitios web.

Ya no es necesario depender de complementos de navegador que acaparan recursos para crear algo realista. De hecho, las soluciones que tenemos a nuestra disposición son multiplataforma y relativamente ligeras. Eso te da la libertad de experimentar y dejar que esos efectos líquidos se viertan en tus proyectos.

¿Utilizas algunos de estos efectos líquidos en tu sitio web? Pues no dudes y dinos cuales son y para que lo utilizas en los comentarios a continuación…