La idea aquí es crear la apariencia de una presentación de diapositivas sin el carrusel. En otras palabras, estamos haciendo una serie de imágenes que se deslizan de izquierda a derecha y se repiten una vez que se llega al final de las imágenes. El truco es que estamos usando una sola imagen de fondo con animaciones CSS para (…)
La idea aquí es crear la apariencia de una presentación de diapositivas sin el carrusel. En otras palabras, estamos haciendo una serie de imágenes que se deslizan de izquierda a derecha y se repiten una vez que se llega al final de las imágenes.
El truco es que estamos usando una sola imagen de fondo con animaciones CSS para moverla por la pantalla y repetir cuando esté lista. Esto crea la ilusión de una galería de imágenes cuando realmente usamos una sola imagen.
Configurando el HTML
Aquí hay un plano de cómo se debe estructurar nuestro HTML:
Hay dos elementos con los que estamos trabajando: el que llamamos .containerque se ajusta al ancho exacto de la ventana gráfica y otro que llamamos .sliding-backgroundque se encuentra detrás .containery lo desborda. En esencia, estamos usando .containercomo máscara para ocultar el ancho completo a .sliding-backgroundmedida que se desplaza por la pantalla.
Eso significa que solo necesitamos crear dos elementos en el marcado HTML:
Colocación de los elementos
Sigamos adelante y agreguemos algo de CSS que posicionará correctamente nuestros dos elementos.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Nuestro .containerutiliza la overflowpropiedad que ocultará todo lo que esté contenido visualmente fuera de ella. Piense en ello como un recorte en una fotografía. Puede haber cosas adicionales fuera del contenedor, pero el contenedor nos impide verlo.
Ahí es donde .sliding-backgroundentra en juego nuestro . Está configurado con un ancho ridículo que desbordaría la mayoría de las ventanas gráficas. Y ese es el truco: debería ser algo que desborde el contenedor. En este caso, estamos usando un 5076pxancho elegido arbitrariamente que debería desbordar la mayoría de las ventanas gráficas del navegador.
Crear la imagen de fondo
Necesitamos una imagen si estamos creando la ilusión de una galería de presentación de diapositivas, ¿verdad? Ese es nuestro próximo orden del día.
¿Recuerda cómo mencionamos el 5076pxancho elegido arbitrariamente para el fondo deslizante? Bueno, es arbitrario, pero intencional en el sentido de que es bastante divisible por 3, lo que encaja en el tiempo de un ciclo de un minuto, que aparecerá un poco más tarde. Eso significa que el lienzo de nuestra imagen de fondo es 5076 / 3o 1692px. Al final, nuestro fondo se repetirá un total de tres veces en un minuto en un bucle infinito. ¡Matemáticas para la victoria!
La 500pxaltura es verdaderamente arbitraria. Puede ser lo que desee y siempre que sea el tamaño real del archivo de imagen de fondo.
El archivo de Photoshop utilizado para crear la imagen de fondo para la demostración al comienzo de este capítulo está disponible para descargar si está buscando un punto de partida.
Una vez que la imagen se ha guardado (¡y optimizado!), Esto es lo que usaremos como imagen de fondo en el CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )¡Genial! Eso nos da la imagen descomunal que desborda el contenedor y ahora se puede usar para desplazarse por la pantalla hasta el infinito.
Animando el fondo
Muy bien, hagamos que esto se mueva. Queremos que vaya de izquierda a derecha en un bucle que se repita una y otra vez para crear un efecto continuo que la imagen continúe para siempre.
Primero, definamos la animación CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Estamos usando la transformpropiedad para colocar la imagen izquierda en el borde izquierdo del contenedor cuando comienza la animación, así:
Para cuando la animación se haya completado, habrá transformado la posición negativamente (de izquierda a derecha) en una cantidad que coincida con el ancho exacto de nuestra imagen. Y, dado que .sliding-backgroundes tres veces el ancho de la imagen real, la imagen se repite tres veces entre 0% y 100% antes de volver a repetirse.
Nota: la razón por la que estamos usando una
background-positionen el principal transformpara hacer el movimiento, que es mucho más performativo.
OK, redondeemos las cosas llamando a nuestra slideanimación en la .sliding-backgroundclase:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )La animationpropiedad le indica .sliding-backgrounda utilizar la slideanimación y ejecutarla durante un minuto a la vez en un bucle infinito lineal.
Poniendolo todo junto
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )