El ataque de los fondos animados basados ​​en blobs en el 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 tropezar con:

• animaciones de partículas;
• animaciones caleidoscópicas;
• Animaciones 3D abstractas;
• Animaciones geométricas fluidas y mucho más.

Mientras que hace varios años las animaciones de partículas inspiradas en constelaciones dominaban, 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 gota se mueve suavemente en el espacio gana fácilmente a la audiencia en línea y coloca a su sitio web a la cabeza.

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

Animación de manchas por Uwe Chardon

La versión de Uwe Chardon de esta popular solución es práctica e inspiradora. Presenta 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.

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

Blob de Ashton Holgate

El ejemplo anterior representa un tipo tradicional de blob con una forma irregular y una transformación relativamente expresiva. Sin embargo, este proyecto de Ashton Holgate se ciñe a una forma más divina, que casi bordea 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, obligándolo a cambiar su color al opuesto cuando golpea el área de la burbuja.

Ver el Pen Blob de Ashton Holgate

Cargador de líquido rebotador de Fabio Ottaviani

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

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 Pen Bouncing de Fabio Ottaviani

Prueba de manchas de lienzo de 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 se diferencia 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 Pen Canvas Blob de Shaw

Gota de 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 de resorte básico que hace que la interacción con la enorme mancha se sienta real y no artificial.

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

Ver el Pen Blob de Jeffrey

Manchas de Charlotte Dann

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

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

Ver los Pen Blobs de Charlotte Dann

Ahora, pasemos del mundo plano a uno tridimensional.

Blob de Georgi Nikoloff

Blob de Georgi Nikoloff es un buen 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 shaders a su favor. Aunque la solución está sujeta a la compatibilidad del navegador, parece inspiradora.

Ver el Pen blob de Georgi Nikoloff

Experimento #6 por Daniel Del Core

Daniel Del Core le muestra a la audiencia en línea cómo jugar con el ruido Simplex y arreglarlo con algunas texturas cuidadosamente reproducidas. El resultado es una bola similar a la pintura inspirada en un caramelo. Aunque se mueve bastante rápido, es tan fascinante que es difícil apartar la vista de él de inmediato.

Vea el Experimento del bolígrafo n.º 6 de 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 pop de los años 80 obsesionados con el spandex, este se siente como algo del modesto futuro techno. La mancha se construye a partir de partículas diminutas 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 trabajo ingenioso con textura procesal para lograr este concepto.

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

Generador de blobs CSS por Edwin Chen

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

Aquí encontrarás un pequeño panel donde puedes 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 por Edwin Chen

La forma perfecta para una atmósfera relajante

No es sorprendente que la naturaleza suave y tranquila del comportamiento líquido se esté volviendo popular en estos días. Como un pequeño arroyo fascinante que atraviesa el bosque, lo 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 y plana o un 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 te ayudarán a mantener el equilibrio entre los datos visuales y textuales.