Ataque en 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 decorar un área de héroe hoy. Si bien todavía hay un problema con la compatibilidad del navegador, la solución ha logrado encontrar un nicho por sí misma.

Hay diferentes tipos de animaciones. Puedes encontrar:

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

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

Uwe Chardon blob animation

La versión Uwe Chardon de esta popular solución es práctica e inspiradora. Tiene una caída simple y plana, con un hermoso color naranja y bordes suaves, colocados en un ambiente limpio. Se las arregló para imitar muy bien el comportamiento neto.

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

Mira la animación CSS pura de Uwe Chardon’s Pen

Ashton Holgate Blob

El ejemplo anterior representa un tipo tradicional de gota 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 rodea el círculo, y los cambios son casi imperceptibles. Sin embargo, también se ve excepcional.

Además, el artista también jugó con el texto, forzándolo a cambiar de color al opuesto cuando toca el área de la burbuja.

Vea el bolígrafo Blob de Ashton Holgate

Cargador de líquidos que rebota por Fabio Ottaviani

Fabio Ottaviani puso en práctica la naturaleza lúdica del comportamiento cautivador, inherente a las animaciones de blob. Su burbuja es pequeña, pero tiene un gran impacto con su encantadora transformación y diversión.

Aunque la placa de diseño del bolígrafo dice “Cargador”, se puede convertir fácilmente en un detalle de fondo decorativo. Y para hacer eso, todo lo que necesita saber es HTML y CSS, ya que el artista no usa ninguna magia de JavaScript. Inteligente.

Ver Cargador de líquidos con lanza retráctil 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 complejo con gráficos. Además, el concepto difiere de los demás en su aspecto primitivo, junto con un comportamiento muy 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 varios proyectos.

Ver prueba de pluma 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 hoy en día y el comportamiento neto que prevalece sobre otras opciones.

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

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

Mira la pluma de Jeffrey

Charlotte Dann Blobs

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

Su fragmento de código es una delicia para ver. Tiene muchas burbujas pequeñas en movimiento que interactúan entre sí. Cada uno parece un pequeño punto de luz. Juntos, forman una gran gota que irradia calor en todos los frentes.

Mira los blobs de plumas de Charlotte Dann

Ahora, pasemos del mundo plano al mundo tridimensional.

Blob de Georgi Nikoloff

La gota de Georgi Nikoloff es un ejemplo. Inmediatamente llama la atención con su color 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 la gota de plumas de Georgi Nikoloff

Prueba 6 por Daniel Del Core

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

Ver Experimento de pluma # 6 por Daniel Del Core

Eli Fitch Gota de partículas falsas

A diferencia del ejemplo anterior, que tiene una personalidad audaz y el carisma de una estrella del pop de los 80 obsesionada con el spandex, esto parece algo del modesto techno del futuro. El blob está construido a partir de pequeñas partículas que son más brillantes en algunos ángulos para una apariencia 3D.

Como era de esperar, el artista emplea la magia de Three.js y el ingenioso trabajo de textura procesal para realizar este concepto.

Vea el bolígrafo de partículas falsas de Eli Fitch # 3December

CSS Blob Generator por Edwin Chen

Terminemos nuestra colección con el generador de blobs CSS de Edwin Chen. Como dice el título, este bolígrafo cuenta con un pequeño patio de recreo donde es posible 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 moverlo con la ayuda de JavaScript.

Ver el generador de blobs CSS Pen de Edwin Chen

La forma perfecta para un ambiente relajante.

No es sorprendente que la naturaleza tranquila y gentil del comportamiento líquido se esté volviendo popular hoy en día. Como una pequeña y fascinante corriente 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 diseñadas para beneficiar proyectos modernos. Son discretos, aunque sin duda llaman la atención. Si elige una creación 3D elegante, plana o extravagante, establecerá fácilmente una atmósfera tranquila.

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

Publicaciones relacionadas

Botón volver arriba