El “truco” de deslizar fondos en CSS no es nuevo. De hecho, la primera vez que lo encontré podría haber sido hace un par de años en el sitio de Valio Con (el diseño actual ya no lo tiene). Sin embargo, lo noté en un par de sitios nuevos que visité hoy y pensé que valdría la pena compartirlo.
Este es el efecto que buscamos:
Vea Pen gamYOy de Programar Plus(@css-tricks) en CodePen.
Tenga en cuenta que esto es diferente de una presentación de diapositivas o carrusel de CSS, donde el contenido se separa en diapositivas en las que se puede detener. Hay grandes ejemplos de ellos en todo CodePen.
Esta técnica toma el fondo de un elemento y lo desliza a través del eje x infinitamente en un bucle para crear el efecto de un fondo interminable y siempre en movimiento.
Configurando el HTML
Esta es una especie de modelo de cómo debe estructurarse nuestro HTML:
Hay un elemento que se ajusta al ancho exacto de la ventana gráfica y otro que la atraviesa y la desborda. Eso significa que solo necesitamos crear dos elementos en el marcado HTML: uno para el fondo y otro para que actúe como un envoltorio contenedor para ese fondo.
<div class="wrapper">
<div class="sliding-background"></div>
</div>Posicionamiento de los elementos
Avancemos y agreguemos algo de CSS que posicionará correctamente nuestros dos elementos.
.wrapper {
overflow: hidden;
}
.sliding-background {
height: 500px;
width: 5076px;
}Nuestra .wrapper es el 100 % del ancho del navegador de forma predeterminada (así son los elementos a nivel de bloque), y hemos agregado un overflow propiedad que ocultará cualquier cosa que esté visualmente contenida fuera de ella. Piense en ello como un recorte en una fotografía. Puede haber cosas adicionales fuera del envoltorio, pero el envoltorio 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: debe ser algo que desborde el envoltorio. En este caso, elegí un tanto arbitrariamente un 5076px ancho.
Crear la imagen de fondo
Necesitamos una imagen si vamos a desplazar algo por la pantalla, ¿verdad? Ese es nuestro próximo orden del día.
Recuerda cómo mencioné que había elegido arbitrariamente 5076px como el ancho para el fondo deslizante? Bueno, es arbitrario, pero intencional en el sentido de que es 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 ganar!
El 500px la altura es verdaderamente arbitraria. Eso puede ser lo que quieras y actuará como la altura del lienzo para la imagen de fondo.
Aquí está la plantilla de Photoshop utilizada en este ejemplo para comenzar:
Descargar ZIP
Guarda (¡y optimiza!) la imagen. 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;
}¡Estupendo! Eso nos da la imagen descomunal que desborda el envoltorio y ahora se puede usar para desplazarse por la pantalla hasta el infinito.
El efecto deslizante
Está bien, hagamos que este chico malo se mueva. Queremos que vaya de izquierda a derecha en un bucle que se repite una y otra vez para crear un efecto uniforme que la imagen continúa para siempre.
Primero, definamos la animación CSS:
@keyframes .slide {
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1692px, 0, 0);
}
}estamos usando el transform propiedad para colocar la imagen izquierda en el borde izquierdo de la envoltura cuando comienza la animación, así:
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, desde el .sliding-background es tres veces el ancho de la imagen real, la imagen se repite tres veces entre el 0 % y el 100 % antes de volver a repetirse.
Nota: la razón por la que estamos usando un adicional <div> en absoluto, en lugar de animar background-position en lo principal <div>, es para que podamos usar un animado transform para hacer el movimiento, que es mucho más performático.
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 ejecutarla durante un minuto a la vez en un bucle infinito lineal.
Poniendolo todo junto
<div class="wrapper">
<div class="sliding-background"></div>
</div>.wrapper {
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);
}
}Aquí está el resultado final:
Vea Pen gamYOy de Programar Plus(@css-tricks) en CodePen.