4 trucos de fondo modernos para probar

Parece que, como componente de un diseño, los fondos viven en las sombras; sin embargo, eso no es del todo cierto. En tiempos en los que CSS apenas comenzaba a dar sus primeros pasos hacia la conquista del mundo, el fondo ya había asumido el papel de principal elemento decorativo de la web.

Hoy en día la situación no ha cambiado drásticamente. En la mayoría de los casos, sirve como una fuerza impulsora visual primaria que hace una contribución importante al tema general.

Tradicionalmente, las fotos y los videos son las primeras opciones para un fondo. El hecho es que son simplemente secciones de héroes superpobladas: cualquier otro sitio web recibe a la audiencia en línea con un telón de fondo basado en imágenes o en películas. Y eso hace que la Web (y su interfaz en particular) se parezcan bastante, lo que resulta en una experiencia de usuario anticipada.

Una salida es encontrar nuevas soluciones aprovechando las nuevas técnicas y jugando con CSS3, HTML5 y JavaScript. De hecho, existe una tendencia perceptible de optar por estas opciones. Hay al menos cuatro fondos dinámicos modernos diferentes que participan en una competencia para ganar su lugar bajo el sol en estos días.

Veámoslos:

Animación de partículas

La animación de partículas es una de las opciones más populares en este momento. Montones de sitios web han adoptado con éxito esta elegante solución inspirada en el cosmos. Funciona bien en combinación con lienzos de color liso, ilustraciones, dibujos vectoriales e incluso fotografías.

Además, la animación varía. Puede ser un conjunto de puntos en movimiento caótico que se encuentran dispersos por toda la página para imitar el cielo estrellado o la lluvia de estrellas, o una solución con temática de constelación en la que puede conectar círculos con líneas finas. Y eso no es todo; a veces se combina con los efectos activados por los eventos de desplazamiento del mouse: en este caso, puede alejar las partículas, formar remolinos a partir de ellas, adjuntarlas al cursor como un rastro, etc.

Huub es un ejemplo de la típica animación de partículas. Cuenta con un ordenado grupo de puntos en movimiento que combina perfectamente con un color oscuro y un mapa colocado en la parte posterior. Usa el cursor del mouse para divertirte.

Consejo: Si desea familiarizarse con el fondo de encabezado dinámico de Huub, entonces debería echar un vistazo al proyecto creado por Dominic Kolbe llamado demo de paralaje del ratón. Se ve casi igual. Pero si necesita una solución inmediata, entonces la biblioteca JavaScript de Vincent Garreau se llama Particles.js es lo que estás buscando.

Ondas de partículas

Mientras que en el ejemplo anterior, el efecto se puede lograr con las manipulaciones inteligentes con HTML5 y CSS3 y una pizca de magia JavaScript, este es un experimento ingenioso con la biblioteca Three.js. Con sus formas arqueadas y sus suaves movimientos ondulantes, recuerda fácilmente a las pequeñas mareas. Crea una sensación de lienzo respirable. Puede usar el cursor del mouse para rotarlo en diferentes direcciones, explorándolo tanto horizontal como verticalmente.

StuurMen tiene una sección de «bienvenida» simple y refinada. Es mínimo, limpio y exquisito. El contenido entra discretamente en el campo de visión, mientras que el fondo vibrante establece el ambiente adecuado para el proyecto.

Consejo: Aquí puedes encontrar un guión original de ThreeJS y su exitosa adaptación de Deathfang con una demo llamada three.js lienzo – partículas – ondas.

Paralaje de desplazamiento del mouse

El paralaje en capas es otra tendencia creciente. Junto con la animación de partículas, puede transformar un fondo estático opaco en una composición con una sutil sensación 3D. Lo bueno es que no tienes que deshacerte de tu elección de imagen favorita, solo usa paralaje para arreglarla un poco.

Es bastante beneficioso cuando necesita animar el título, el logotipo, la escena surrealista o la ilustración. También es adecuado para varias animaciones abstractas. Activado por el evento de desplazamiento estándar del mouse, no solo agrega otra dimensión, sino que también permite a los usuarios jugar con el entorno.

El portafolio personal de Alexandre Rochet tiene una página de bienvenida excepcional. El comportamiento no solo llama la atención, sino que también el paralaje del mouse desplaza las letras.

Consejo: Existen numerosas bibliotecas y fragmentos de código viables para generar paralaje. Uno de los más populares es un complemento creado por Matthew Wagerfield llamado Parallax.js. Sin embargo, si necesita verlo en la práctica, especialmente aplicado a la tipografía, puede explorar un bolígrafo de Frontnerd que presenta su versión de un Paralaje 3d en el mouse.

Experimentos WebGL

Los experimentos de WebGL son, por supuesto, una variante para desarrolladores y clientes sofisticados y endurecidos con un presupuesto generoso. Pueden ser brillantes, impresionantes y un poco pomposos. Vale cada centavo. Sin embargo, siempre hay una mosca en la pomada. Un gran poder conlleva una gran responsabilidad, y con WebGL nunca debe olvidarse de la cantidad de recursos que consume y de la falta de compatibilidad total con los navegadores.

Solarin se trata de una experiencia de usuario inolvidable y alucinante. Es un experimento WebGL 3D que es rico en numerosas funciones interesantes e innovadoras. El fondo del encabezado es una enorme esfera futurista que responde al cursor del mouse y crea una tremenda impresión.

Consejo: Si bien imitar lo que han hecho los genios en MediaMonks es endiabladamente complicado, en la Web siempre puedes encontrar un punto de partida que te dé que pensar. Considera el API de WebGL, y este codepen de Yoichi Kobayashi que ha creado un proyecto llamado «La esfera serpenteante».

Conclusión

Mientras que la utilización de imágenes y videos es una forma menos dolorosa y probada en el tiempo de embellecer el fondo, existen otras opciones prometedoras y experimentales que pueden obtener el resultado deseado. Mantenerse alejado de las banalidades es un desafío e incluso consume dinero, pero estas medidas están justificadas y son bastante razonables.

Ya sea una animación de partículas simple pero elegante o un notable experimento WebGL, inyecta nueva vida en un detalle central de la interfaz, lo que le da a su sitio web una ventaja.