ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

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

15 marzo, 2019 por Pedro Mendez 4 comentarios

Tabla de Contenidos

  • El Blob cobra vida
  • El Blob que gira
  • Botón Wiggly, Jiggly
  • Una gota en el botón
  • Cargador de liquido
  • Juice Me Up
  • Criatura de las profundidades
  • Experiencia de arco iris líquido cambiante
  • Terminando

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.

Si quieres incluir un efecto despegar pegatinas realizado con Javascript, lo puedes hacer siguiendo el enlace anterior

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…

..Entradas Relacionadas

  • Como crear un Tema de WordPress desde una plantilla HTML
  • Como Cambiar el Color de los Botones en WooCommerce
  • 5 plugins editores de CSS gratis para la edición en vivo en WordPress
  • 11 Videojuegos Retro Creados con HTML5, JavaScript y CSS
  • Como hacer cajas de colores con esquinas redondeadas con CSS en Wordpress

Publicado en: Diseño Etiquetado como: css, javascript, liquido

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  1. Carlos Benítez dice

    29 marzo, 2019 a las 7:50 PM

    Buenas Pedro, te sigo desde hace mucho tiempo. Escribes y transmites muy bien las ideas. ¡Enhorabuena!.
    Una pregunta – aunque puede parecer tonta – ¿estos efectos se cargan sin más en WP con sólo incluir fragmento de código?, ¿o hay que elaborar pequeños scripts para ser llamados o algo así?. Muchas Gracias Crack!!

    Responder
    • Pedro Mendez dice

      1 abril, 2019 a las 1:12 PM

      Hola Carlos! Gracias a ti por comentar ;).
      Tendrás que elaborar los scripts para que hagan las llamadas necesarias, pues estos códigos sirven para cualquier tipo de web.
      Si me animo, escribiré un tutorial al respecto para integrar estos códigos a WordPress. Saludos!

      Responder
  2. dorelys perez dice

    6 mayo, 2019 a las 8:58 AM

    Simplemente genial… Una pregunta, como o donde puedo conseguir un efecto que a medida que se haga scroll, la web se cargue como si estuviese botando un liquido, no sé si me explico…

    Responder
    • Pedro Mendez dice

      7 mayo, 2019 a las 12:02 PM

      Hola Dorelys,
      Sabes de alguna web que tenga ese efecto para ver a que te refieres exactamente?
      Saludos

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (511)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)