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 única 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 estamos usando una sola imagen.
Configurando el HTML
Aquí hay un plan de cómo se debe estructurar nuestro HTML:
Hay dos elementos con los que estamos trabajando: el que estamos llamando. .container que se ajusta al ancho exacto de la ventana gráfica y otro al que llamamos .sliding-background que se sienta detrás del .container y lo desborda. En esencia, estamos usando el .container como una máscara para ocultar todo el ancho de la .sliding-background mientras se desplaza por la pantalla.
Eso significa que solo necesitamos crear dos elementos en el marcado HTML:
<div class="container">
<div class="sliding-background"></div>
</div>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;
}Nuestra .container usa el overflow propiedad que ocultará todo lo que esté contenido visualmente fuera de ella. Piense en ello como un recorte en una fotografía. Puede que haya cosas extra fuera del contenedor, pero el contenedor nos impide verlo.
Ahí es donde nuestro .sliding-background entra en juego. 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 método elegido arbitrariamente 5076px ancho 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.
Recuerde cómo mencionamos que los elegidos algo arbitrariamente 5076px ancho 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 / 3 o 1692px. Al final, nuestro fondo se repetirá un total de tres veces en un minuto en un bucle infinito. ¡Matemáticas para la victoria!
El 500px la altura es verdaderamente arbitraria. Puede ser lo que quieras 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 */
}¡Estupendo! 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 el transform propiedad 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 el .sliding-background es tres veces el ancho de la imagen real, la imagen se repite tres veces entre 0% y 100% antes de volver a aparecer en bucle.
La razón por la que usamos un adicional <div> en absoluto, en lugar de animar background-position en la principal, es para que podamos utilizar un animado transform para hacer el movimiento, que es mucho más eficaz.
OK, redondeemos las cosas llamando a nuestro slide animación en el .sliding-background clase:
.sliding-background {
background: url("..path/to/image") repeat-x;
height: 560px;
width: 5076px;
animation: slide 60s linear infinite;
}El animation propiedad instruye al .sliding-background usar el slide animación y ejecutarlo durante un minuto a la vez en un bucle infinito lineal.
Poniendolo todo junto
<div class="container">
<div class="sliding-background"></div>
</div>.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);
}
}