El siguiente es un artículo invitado de Joseph Markus. Joseph tenía un diseño particular que necesitaba implementar para el sitio web Britain on Film de BFI. Como un verdadero desarrollador front-end, Joseph consideró los requisitos y revisó muchas opciones diferentes para encontrar el mejor enfoque. Él nos llevará a través de ese viaje aquí. No sé a ti, pero a mí me encantan este tipo de cosas.
En julio de este año, Britain on Film de BFI se lanzó con gran éxito. Un archivo de metraje histórico como ningún otro, Britain on Film invita a los espectadores a realizar un viaje a través de la historia británica.
Una de las características clave que el equipo de Ostmodern tuvo que diseñar y crear para este producto fue una página de destino que invitaba a los usuarios a explorar el archivo, descubriendo contenido por hora, tema y ubicación. Un componente central de esta página de inicio es un módulo animado de sugerencias de contenido, cada uno de los cuales muestra imágenes fijas de películas del archivo.
Aquí hay un video que muestra el resultado final:
https://www.youtube.com/watch?v=2oQmhpwCX1o
El resumen del proyecto dejó en claro que esta tarea debía dividirse en partes manejables y tenía que tener en cuenta las siguientes restricciones:
- Imágenes administradas por CMS – Las personas que gestionan contenidos en el equipo de BFI suben imágenes con dimensiones predefinidas. Luego, esa imagen se asigna a uno de los tres contenedores: izquierdo, superior o derecho.
- Sensibilidad – No solo es necesario cambiar el tamaño del contenedor horizontalmente, sino que, a medida que se estrecha, también debe ocupar menos altura.
- animaciones – Las imágenes no cambian inmediatamente sino que se desvanecen a la siguiente.
- Compatibilidad con navegador – Debería funcionar lo más atrás posible y retroceder con gracia.
- Semántica – Usa HTML y CSS, no Flash ni nada por el estilo.
Buscaremos combinaciones de las restricciones anteriores. Como he pasado una cantidad razonable de tiempo investigando el mejor enfoque para esta tarea, pensé que sería muy útil compartir mis hallazgos, el enfoque y, obviamente, el resultado final.
Esta es una estructura alámbrica Sketch del diseño que necesitamos:
Las tres secciones aquí deben tener imágenes como fondo.
Pasaremos por una serie de técnicas. La última es la versión que llegó a producción.
- CSS
transformen divs - CSS
clip-path - SVG
<pattern><image> - SVG
<clipPath><polygon>+<image>
Intento #1: Transformaciones CSS
Este es el primero que se me vino a la cabeza. Un contenedor de imagen con un ancho/alto establecido, posición relativa y desbordamiento oculto. Dos rectángulos dentro, colóquelos absolutamente, transforme y gire: todos los números mágicos. Vea mi maqueta rápida de Sketch:
El mayor problema aquí es obtener el grado de rotación correcto. Establecer el ancho y la altura sobredimensionados correctos de cada una de las formas, colocando los elementos fuera de los límites del contenedor principal. Todo alcanzable, pero muy aburrido y sucio. Si iba a seguir esta ruta, tal vez una buena manera de hacerlo es exportar la maqueta como la que tengo arriba como una imagen plana y configurarla como la imagen de fondo de la página, luego comience a posicionar y ajustar los elementos en DevTools hasta que lo hagas bien.
Aunque hay un gran problema. Digamos que pone imágenes en estos contenedores (como con background-image). Esas imágenes también se rotan, que no es lo que queremos. No es imposible de arreglar. Podrías usar los pseudo elementos en ellos y rotarlos en la dirección inversa, pero créeme, se vuelve muy complicado, especialmente cuando comienzas a lidiar con consultas de medios.
ventajas
- Tecnología cómoda: algunos divs girados y posicionados
Contras
- Mucho cálculo y medición.
- Los puntos de interrupción receptivos son difíciles de lograr
Esta opción es claramente un no-go.
Intento n.º 2: ruta de recorte CSS
CSS clip-path me vino a la mente como una de esas cosas de “He oído hablar de él, pero nunca lo usé”. Clippy, la herramienta de Bennett Feely, hace que parezca muy fácil y directo.
Esta es probablemente la opción más limpia, directa y definitivamente mi favorita.
ventajas
- Fácil de crear y modificar.
- Código limpio
Contras
- Sin soporte de IE, que es un requisito para este proyecto
Lamentablemente, los contras lo eliminaron del juego. Aquí hay una demostración de cómo funciona de todos modos:
Vea el Pen LpbzRa de Joe (@jmarkevicius) en CodePen.
Intento #3: SVG
Tuve que investigar un poco para descubrir qué estaba haciendo aquí y obtener el resultado deseado. Mis exportaciones SVG desde Sketch eran un poco confusas y parecían incluir mucha basura. Tuve que experimentar bastante y encontré comprensión. viewBox y preserveAspectRatio bonita clave. Aquí hay algunos recursos para ayudar a esa comprensión:
- Jakob Jenkov: ventana gráfica SVG y caja de vista
- Sara Soueidan: comprensión de los sistemas de coordenadas SVG y las transformaciones (parte 1): la ventana gráfica, el cuadro de visualización y la relación de aspecto preservada
- Joni Trythall: una mirada a preserveAspectRatio en SVG
- Giovanni DiFeterici: SVG y la propiedad preserveAspectRatio
ventajas
- Amplia compatibilidad con navegadores (IE 9+, Firefox 41+)
Contras
- Un poco decepcionante después del clip-path de CSS
- Firefox tiene un error en las versiones
Ejemplo de una imagen recortable como fondo en varias formas SVG:
Vea el área de juegos Pen SVG Pattern de Aleksey (@bonflash) en CodePen.
Intento #4: SVG +
Esta opción surgió como una solución para el error de Firefox descrito en el último intento. Aplica las imágenes a través del SVG normal. <image> etiqueta, luego aplica una clip-path a ellos construidos a partir de lo necesario <polygon>s.
Vea el Pen jPgmWG de Joe (@jmarkevicius) en CodePen.
Este es el ejemplo que entró en producción debido a su amplia compatibilidad con navegadores.
Agregue algunas transiciones elegantes, superponga algunos elementos más y listo: la página de destino de Gran Bretaña en película en BFI Player está lista para funcionar.
Déjeme saber su opinión en los comentarios!
Recursos adicionales
- MDN: viewBox
- Justin McCandless: Dar sentido a la locura de SVG viewBox
- Programar Plus: recorte y enmascaramiento en CSS
- Steven Bradley: mover y escalar gráficos SVG con el atributo viewBox
- Tavmjong Bah: prueba de SVG ViewPort y ViewBox en HTML