El efecto de fondo deslizante no es lo mismo que la presentación de diapositivas o el carrusel. La presentación de diapositivas o el carrusel consta de diapositivas divididas que se pueden detener según el deseo del usuario. El fondo deslizante toma una imagen y la desliza a través del eje x infinitamente en un bucle para crear el efecto de un fondo en movimiento continuo e interminable.
Enfoque: en un diseño HTML, se necesitan dos elementos para implementar el fondo deslizante. Uno que se ajusta exactamente a la ventana gráfica y el otro que lo atraviesa y lo desborda. En palabras simples, uno para el fondo y otro para actuar como un envoltorio contenedor para el fondo.
<div class="wrapper"> <div class="sliding-background"></div> </div>
En el siguiente paso, a los dos elementos se les asignan posiciones relevantes. De forma predeterminada, el envoltorio tendrá el 100 % del ancho del navegador, y se aplica una propiedad de desbordamiento que ocultará todo lo que esté contenido visualmente fuera del envoltorio. El envoltorio permitirá al usuario ver solo la parte contenida en él. Está configurado en un ancho que seguramente desbordaría casi todas las ventanas gráficas, lo que significa que desbordaría el envoltorio.
.wrapper {
overflow: hidden;
}
.sliding-background {
height: 960px;
width: 6000px;
}
En el siguiente paso, la imagen de fondo debe crearse con una altura y un ancho arbitrarios. El ancho se toma como tres veces mayor para caber en un bucle de un minuto más largo. El lienzo se moverá tres veces en un minuto en un bucle infinito. El software más recomendado para crear imágenes es Adobe Photoshop. Después de crear la imagen, agréguela al CSS de fondo deslizante de la siguiente manera.
.sliding-background {
background: url("path to the image") repeat-x;
height: 500px;
width: 5076px;
}
El siguiente paso incluye agregar el efecto deslizante. Se espera que la imagen de fondo se mueva de izquierda a derecha en un bucle que se repite y crea un efecto uniforme de que la imagen se mueve en el infinito. La transformación se usa para colocar la imagen de la izquierda en el lado izquierdo del envoltorio cuando comienza la animación. Para cuando se complete la animación, habrá transformado la posición negativamente (de izquierda a derecha) en una cantidad que coincida con el ancho exacto de nuestra imagen. Esta es la razón por la que el fondo deslizante es tres veces el ancho de la imagen real, la imagen se repite tres veces entre 0% y 100% antes de repetirse.
@keyframes .slide {
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1692px, 0, 0);
}
}
La propiedad de animación le indicará a la clase de fondo deslizante que use la animación de diapositivas para ejecutarse durante un minuto a la vez en un bucle infinito lineal.
.sliding-background {
background: url("..path/to/image") repeat-x;
height: 560px;
width: 5076px;
animation: slide 60s linear infinite;
}
Código completo:
<!DOCTYPE html>
<html>
<head>
<title>Sliding Background</title>
<style>
.wrapper {
overflow: hidden;
}
.sliding-background {
background: url(
"https://ik.imagekit.io/slashit/sliding-background_3z5vIlHdF.png")
repeat-x;
height: 961px;
width: 6000px;
animation: slide 60s linear infinite;
}
@keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-2000px, 0, 0);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="sliding-background"></div>
</div>
</body>
</html>
Producción: