La siguiente es una publicación invitada 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 de front-end, Joseph tomó en cuenta los requisitos y pasó por muchas opciones diferentes para encontrar el mejor enfoque. Él nos guiará a través de este viaje aquí. No sé ustedes, pero me gustan ese tipo de cosas.
En julio de este año, BFI’s Britain on Film se lanzó con gran éxito. Un archivo de imágenes históricas como ningún otro, Britain on Film invita a los espectadores a un viaje por la historia británica.
Una de las características clave que el equipo de Ostmodern tuvo que diseñar y construir para este producto fue una página de inicio que invitaba a los usuarios a explorar el archivo, descubriendo contenido por tiempo, tema y ubicación. Un elemento central de esta página de destino es un módulo animado de sugerencias de contenido, cada uno de los cuales representa 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 debe dividirse en partes manejables y debe tener en cuenta las siguientes restricciones:
- Imágenes gestionadas por CMS – Las personas que administran el contenido del equipo BFI cargan imágenes con dimensiones predefinidas. Luego, esta imagen se asigna a uno de los tres contenedores: izquierdo, superior o derecho.
- Reactividad – El contenedor no solo debe cambiar de tamaño horizontalmente, ya que se encoge, sino que también debe ocupar menos altura.
- Animaciones – Las imágenes no cambian inmediatamente sino que pasan a la siguiente.
- Soporte de navegador – Debe correr lo más lejos que pueda y caer con gracia.
- Semántica – Usa HTML y CSS, no Flash o algo tan loco como eso.
Consideraremos las combinaciones de las restricciones anteriores. Como pasé una cantidad razonable de tiempo investigando el mejor enfoque para esta tarea, pensé que sería muy útil compartir mis conclusiones, mi enfoque y, obviamente, el resultado final.
Este es un diagrama de estructura alámbrica de Sketch del diseño que necesitamos:
Pasaremos por una serie de técnicas. La última es la versión que se ha puesto en 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 ocurre. Un contenedor de imágenes con un ancho / alto definido, una posición relativa y un desbordamiento oculto. Dos rectángulos en el interior, posicionarlos absolutamente, transformar la rotación, todos números mágicos. Vea mi maqueta de boceto rápido:
El mayor problema aquí es conseguir la cantidad adecuada de rotación. Ajustando el ancho y alto correcto sobredimensionado de cada una de las formas, posicionando elementos fuera de los límites del contenedor principal. Todo es alcanzable, pero muy aburrido y sucio. Si estaba siguiendo esta ruta, tal vez una buena manera de hacerlo es exportar la maqueta de lo que tengo arriba como una imagen plana y establecerla como imagen de fondo. página, y luego comience a posicionar y ajustar los elementos en DevTools hasta que esté en lo correcto.
Sin embargo, existe un gran problema. Digamos que pones imágenes en estos contenedores (como con background-image). Estas imagenes también se disparan eso no es lo que queremos. No es imposible de arreglar. Puede usar los pseudo elementos en él y rotarlos al revés, pero créame, se vuelve realmente complicado, especialmente cuando comienza a procesar solicitudes de medios.
Ventajas
- Tecnología cómoda: algunos divs rotados y posicionados
Los inconvenientes
- Muchos cálculos y medidas
- Los puntos de interrupción receptivos son difíciles de lograr
Esta opción está claramente prohibida.
Intento n. ° 2: ruta del clip CSS
CSS clip-path me vino a la mente como uno de esos ‘He oído hablar de él pero nunca lo usé’. Clippy, la herramienta de Bennett Feely, hace que parezca muy simple y directo.
Esta es probablemente la opción más clara y sencilla, y definitivamente mi favorita.
Ventajas
- Fácil de crear y editar
- Código limpio
Los inconvenientes
- Sin soporte de IE, que es un requisito para este proyecto
Desafortunadamente, las desventajas lo eliminaron del juego. Aquí hay una demostración de cómo funciona:
Vea Joe’s Pen LpbzRa (@jmarkevicius) en CodePen.
Intento n. ° 3: SVG
Tuve que investigar un poco para descubrir qué estaba haciendo aquí y obtener el resultado deseado. Mis exportaciones de SVG desde Sketch eran un poco confusas y parecían tener mucha basura. Tuve que experimentar un poco y encontré la comprensión viewBox y preserveAspectRatio bonita llave. Aquí hay algunos recursos para ayudarlo a comprender:
- Jakob Jenkov: ventana SVG y cuadro de visor
- Sara Soueidan: Comprensión de las transformaciones y los sistemas de coordenadas SVG (Parte 1): Ventana, viewBox y PreserveAspectRatio
- Joni Trythall: una mirada a PreserveAspectRatio en SVG
- Giovanni DiFeterici: SVG y la propiedad preserveAspectRatio
Ventajas
- Amplia compatibilidad con navegadores (IE 9+, Firefox 41+)
Los inconvenientes
- Un poco de decepción después de la ruta del clip CSS
- Firefox tiene un error en las versiones.
Ejemplo de imagen recortada como fondo en diferentes formas SVG:
Vea el campo de juegos Pen SVG Pattern por Aleksey (@bonflash) en CodePen.
Intento n. ° 4: SVG +
Esta opción vino como una solución para el error de Firefox descrito en el último intento. Aplica las imágenes a través de SVG normal. <image> , luego aplique una clip-path para ellos construido a partir de lo necesario <polygon>s.
Vea el jPgmWG Pen de Joe (@jmarkevicius) en CodePen.
Este es el ejemplo que se puso en producción debido a su amplio soporte de navegador.
Agregue algunas transiciones extravagantes, superponga otros elementos y listo: la página de inicio de películas de Gran Bretaña en BFI Player está lista para funcionar.
Déjeme saber su opinión en los comentarios!
Recursos adicionales
- MDN: viewBox
- Justin McCandless: Dando sentido a la locura de ViewBox SVG
- Consejos de CSS: cortar y enmascarar en CSS
- Steven Bradley: mueva y escale gráficos SVG con el atributo viewBox
- Tavmjong Bah: Prueba de SVG ViewPort y ViewBox en HTML
