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.