4 trucos de fondo modernos para probar
Parece que, como constituyente de un diseño, los fondos viven en las sombras; sin embargo, eso no es del todo cierto. En momentos en que CSS solo comenzaba a dar sus primeros pasos hacia la conquista mundial, el fondo ya había asumido el papel del principal elemento decorativo del sitio 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 videos son las primeras opciones para un telón de fondo. El hecho es que son simplemente secciones de héroes superpobladas: cada otro sitio web saluda a la audiencia en línea con un fondo basado en imágenes o en una película. Y eso hace que la Web (y su interfaz en particular) se parezca bastante, dando como resultado una experiencia de usuario anticipada.
Una salida es encontrar nuevas soluciones explotando las nuevas técnicas y jugando con CSS3, HTML5 y JavaScript. En realidad, hay una tendencia discernible de ir por estas opciones. Hay al menos cuatro fondos dinámicos modernos diferentes que participan en una competencia para ganar su lugar en 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. Un montón de sitios web ha 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.
Por otra parte, la animación varía. Puede ser un conjunto de puntos caóticamente en movimiento dispersos por toda la página para imitar el cielo estrellado o la lluvia de estrellas, o una solución con tema de constelación donde se pueden conectar círculos con líneas finas. Y eso no es todo; a veces se combina con los efectos desencadenados por los eventos de desplazamiento del mouse: en este caso, puede expulsar las partículas, formar remolinos de ellas, unirlas al cursor como un camino, etc.
Huub es un ejemplo de la animación típica de partículas. Presenta un grupo de puntos en movimiento limpio que combina perfectamente con una coloración oscura y un mapa colocado en la parte posterior. Usa el cursor de tu mouse para divertirte.
Sugerencia: si desea familiarizarse con el fondo del encabezado dinámico de Huub, entonces debe echar un vistazo al proyecto creado por Dominic Kolbe llamado demostración de paralaje de mouse . Se ve casi igual. Pero si necesita una solución inmediata, entonces se llama biblioteca JavaScript de Vincent Garreau 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 ingenioso experimento con la biblioteca Three.js. Con sus formas arqueadas y movimientos suaves como ondas, recuerda fácilmente a las pequeñas mareas. Crea una sensación de un lienzo que respira. Puede usar el cursor del mouse para rotarlo en diferentes direcciones, explorándolo horizontal y 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 pulsátil establece un estado de ánimo adecuado para el proyecto.
Consejo: Aquí puedes encontrar un guion original de ThreeJS y su exitosa adaptación de Deathfang con una demo llamada lienzo three.js - partículas - ondas .
Paralaje de mouse mouse
La 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 sensación sutil en 3D. Lo mejor es que no tiene que abandonar su elección de imagen favorita, solo use paralaje para arreglarlo un poco.
Es muy beneficioso cuando necesitas animar el título, logotipo, escena surrealista o ilustración. También es adecuado para diversas animaciones abstractas. Disparado por el evento de desplazamiento del mouse estándar, no solo agrega otra dimensión, sino que también permite a los usuarios jugar con el entorno.
La cartera personal de Alexandre Rochet tiene una excelente página de presentación. No solo el comportamiento llama la atención, sino que también el mouse paralax hace que las letras cambien.
Consejo: Existen numerosas bibliotecas y fragmentos de código viables para generar paralaje. Uno de los más populares es un plugin creado por Matthew Wagerfield llamado Parallax.js . Sin embargo, si necesita verlo en la práctica, especialmente si se aplica a la tipografía, entonces puede explorar un bolígrafo de Frontnerd que muestra su interpretación de una Paralaje 3D en el mouse .
Experimentos WebGL
Los experimentos de WebGL son, por supuesto, una variante para desarrolladores y clientes sofisticados y sofisticados con un presupuesto generoso. Pueden ser brillantes, impresionantes y un tanto pomposos. Vale cada centavo. Sin embargo, siempre hay una mosca en la sopa. Con gran potencia viene una gran responsabilidad, y con WebGL nunca se debe olvidar la cantidad de recursos que consume y la falta de compatibilidad total del navegador.
Solarin se trata de una experiencia de usuario inolvidable y alucinante. Es un experimento 3D WebGL rico en numerosas funciones emocionantes e innovadoras. El fondo del encabezado es una gran esfera futurista que responde al cursor del mouse y crea una impresión tremenda.
Consejo: Si bien imitar lo que los genios de MediaMonks han hecho es diabólicamente complicado, en la Web, siempre puedes encontrar un punto de partida que te brinde algo de reflexión. Considera el API WebGL , y este codepen de Yoichi Kobayashi, quien ha creado un proyecto llamado "La esfera se retuerce" .
Conclusión
Mientras que la utilización de imágenes y videos es una manera probada y menos dolorosa 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 requiere mucho dinero, pero estas medidas están justificadas y son bastante razonables.
Ya sea que se trate de una animación de partículas simple pero elegante o de un notable experimento de WebGL, inyecta nueva vida en un detalle central de la interfaz, dando a su sitio web una ventaja.