Ataque de los fondos animados basados ​​en blobs en diseño web

Los fondos animados son una característica popular de los sitios web modernos. Ya no es una tendencia o algo extraordinario. Es solo una de las formas viables de adornar un área de héroe en estos días. Aunque todavía hay un problema con la compatibilidad del navegador, la solución ha logrado hacerse un hueco.

Hay diferentes tipos de animaciones. Puedes toparte con:

  • Animaciones de partículas;

  • Animaciones caleidoscópicas;
  • Animaciones 3D abstractas;
  • Animaciones geométricas suaves y mucho más.

Mientras que hace varios años las animaciones de partículas inspiradas en constelaciones gobernaban el gallinero, hoy en día las animaciones en forma de gotas excitan las mentes de los equipos creativos. ¿Qué puedes hacer? El comportamiento líquido es irresistible. La rutina de transformación que muestra cómo una gran caída se mueve suavemente en el espacio gana fácilmente a la audiencia en línea y pone a su sitio web a la cabeza.

Para beneficiarse de esta técnica convencional, le ofrecemos una colección de fragmentos de código sobresalientes que le darán una pista de cómo construir su propia animación en forma de burbuja. Puede hacerlo con herramientas tradicionales o nuevas. Ahora, busquemos la combinación perfecta para su próximo proyecto.

Animación de blobs de Uwe Chardon

La versión de Uwe Chardon de esta popular solución es práctica e inspiradora. Cuenta con una gota simple y plana con un hermoso color naranja y bordes suaves colocados en un ambiente limpio. Se las arregló para imitar el comportamiento líquido bastante bien.

El resultado es una combinación ganadora de una forma simple y un comportamiento intrincado que se ve bastante impresionante.

Vea la animación de Pen Blob CSS puro de Uwe Chardon

Blob de Ashton Holgate

El ejemplo anterior representa un tipo de gota tradicional con una forma irregular y una transformación relativamente expresiva. Sin embargo, este proyecto de Ashton Holgate se adhiere a una forma más divina, que casi bordea con el círculo, y los cambios apenas se notan. Sin embargo, también se ve excepcional.

Más aún, el artista también ha jugado con el texto, forzándolo a cambiar su color al opuesto cuando toca el área de la burbuja.

Vea el Blob Pen por Ashton Holgate

Bouncing Liquid Loader de Fabio Ottaviani

Fabio Ottaviani ha puesto en práctica la naturaleza lúdica del comportamiento pegajoso que es inherente a las animaciones de blob. Su burbuja es pequeña, pero produce un gran impacto con su adorable transformación y rebote divertido.

Aunque la placa de identificación del proyecto de la pluma dice “Cargador”, se puede convertir fácilmente en un detalle decorativo del fondo. Y para hacer esto, todo lo que necesita saber es HTML y CSS, ya que el artista no usa ninguna magia de JavaScript. Inteligente.

Vea el cargador de líquido de rebote de pluma por Fabio Ottaviani

Prueba de manchas de lona por Shaw

A diferencia del ejemplo anterior, esta caída es puramente generada por JavaScript. Así que prepárate para sumergirte en una solución emocionante y un juego intrincado con los gráficos. Además, el concepto difiere de los demás por su aspecto primitivo, junto con un comportamiento bastante suave y tranquilo que genera una atmósfera serena en general.

Es bastante universal y neutral. Por lo tanto, podría convertirse en una animación de fondo perfecta para numerosos proyectos.

Vea la prueba de bolígrafo de lona de Shaw

Blob por Jeffrey

Esta solución de Jeffrey es una combinación ganadora de dos tendencias. Aquí, puede encontrar un fondo irregular que es muy popular en estos días y el comportamiento líquido que prevalece sobre las otras opciones.

El fragmento de código está hecho con HTML, CSS y JavaScript. Se ve consistente en varios navegadores y dispositivos. El artista utiliza un algoritmo básico de primavera que hace que la interacción con la gran burbuja se sienta real y no artificial.

Tenga en cuenta que, aunque la burbuja ocupa la mitad de la escena, no domina a los espectadores. El comportamiento suave y sereno se encuentra detrás de esta discreción.

Mira la pluma de Jeffrey

Blobs de Charlotte Dann

Si una gota no es suficiente para producir una impresión adecuada, entonces siempre puedes elegir una docena de ellas. Charlotte Dann, con su ingenioso fragmento de código, le mostrará cómo hacerlo sin arruinar el efecto general y abrumar a los visitantes.

Su fragmento de código es solo un placer para la vista. Cuenta con muchas pequeñas burbujas en movimiento que interactúan entre sí. Cada uno parece un pequeño punto de luz. Juntos, forman una gran gota que irradia calidez en todos los frentes.

Mira los Pen Blobs de Charlotte Dann

Ahora, pasemos del mundo plano a uno tridimensional.

Blob de Georgi Nikoloff

Blob de Georgi Nikoloff es un ejemplo. Inmediatamente llama la atención con su colorido vibrante, apariencia de alta tecnología y comportamiento dinámico. El desarrollador aprovecha al máximo las tecnologías avanzadas, utilizando WebGL, GLSL y sombreadores para su ventaja. Aunque la solución está sujeta a la compatibilidad del navegador, parece inspiradora.

Ver el blob de plumas de Georgi Nikoloff

Experimento 6 de Daniel Del Core

Daniel Del Core muestra a la audiencia en línea cómo jugar con el ruido Simplex y arreglarlo con algunas texturas reproducidas con cuidado. El resultado es una bola de pintura inspirada en dulces. Aunque se mueve bastante rápido, es tan fascinante que es difícil quitarle los ojos de inmediato.

Vea el experimento de pluma # 6 por Daniel Del Core

Gota de partículas falsas de Eli Fitch

A diferencia del ejemplo anterior, que tiene una personalidad audaz y el carisma de una estrella del pop de los años 80 obsesionados con el spandex, este se siente como algo del modesto futuro techno. El blob está construido a partir de pequeñas partículas que se vuelven más brillantes bajo algunos ángulos para lograr una apariencia 3D.

Como era de esperar, el artista emplea la magia de Three.js y un ingenioso trabajo con textura de procedimiento para llevar a cabo este concepto.

Vea el blob de partículas falsas Pen # 3December de Eli Fitch

CSS Blob Generator por Edwin Chen

Vamos a finalizar nuestra colección con CSS Blob Generator de Edwin Chen. Como dice el título, este bolígrafo presenta un pequeño parque infantil donde puedes crear una forma de gota.

Aquí encontrará un pequeño panel donde puede asignar un radio a cada borde. Aunque es estático y plano, puede copiar fácilmente el resultado y ponerlo en movimiento con la ayuda de JavaScript.

Vea el generador de blobs CSS de Pen de Edwin Chen

La forma perfecta para un ambiente relajante

No es sorprendente que la naturaleza suave y tranquila del comportamiento líquido se esté volviendo popular en estos días. Como una pequeña secuencia fascinante que atraviesa el bosque, te atrae y sirve como una isla de serenidad en el mundo en línea en constante cambio.

Las animaciones basadas en blobs están destinadas a beneficiar proyectos modernos. Son discretos, aunque ciertamente llaman la atención. Ya sea que elija una realización elegante, plana o 3D extravagante, establecerá fácilmente una atmósfera tranquila.

Enriquecerá la experiencia, adornará el fondo y, al mismo tiempo, dará paso al contenido. Estos fondos lo ayudarán a mantener el equilibrio entre los datos visuales y textuales.