El control deslizante más simple y pequeño del mundo
Como diseñador de diseño en ese momento, entendía perfectamente cómo funcionan los complementos y revisé repetidamente el front-end con una mente inquisitiva, tratando de lograr la minificación del código y optimizar el trabajo con CSS o el mismo diseño.
El control deslizante nació después de algunos experimentos con el índice Z y, para mi sorpresa, el programa tenía solo 10 líneas. No transformé las imágenes en una imagen de fondo y dejé la capacidad de desplazarme a través de bloques de diseño uniformes.
Aquí está el HTML para el contenedor de escenas:
<figure>
<img src="./graphics/R-1.png" alt="RevolveR Labs" />
<img src="./graphics/R-2.png" alt="RevolveR Labs" />
<img src="./graphics/R-3.png" alt="RevolveR Labs" />
<img src="./graphics/R-4.png" alt="RevolveR Labs" />
</figure>
Agreguemos algo de CSS que cargue las etiquetas de imagen en una plataforma en X: 0 e Y: 0 (arriba: 0px e izquierda: 0px):
figure {
background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
box-shadow: inset 0 0 1vw #000;
outline: .2vw solid #b1917fbd;
border: .1vw dashed #999;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 36.46vw;
height: 22vw;
}
figure img {
position: absolute;
width: 36.46vw;
height: 22vw;
opacity: 1;
left: 0;
top: 0;
}
Ya no uso valores estáticos como PX en el diseño debido a la apariencia de 8K y más monitores, pero hago todo en unidades de puerto de vista escalables, lo que me permite evitar las escaleras a consultas de medios e interfaces de diseño para cualquier resolución de pantalla.
Ahora vamos a escribir un controlador de JavaScript que simplemente hojeará el mazo sin ningún efecto con un intervalo de tiempo:
var e = document.querySelectorAll('figure img');
let i = 0;
if(e) {
void setInterval(() => {
e[i].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
e[i].style.zIndex = 1;
}, 3000);
}
Usamos setInteval para aspirar en la inicialización durante 3 segundos e implementar un iterador reiniciable en un pseudo bucle. En cada siguiente tic del temporizador, cambie el índice z de la imagen deseada en orden. El índice z de la imagen anterior se restablece permanentemente a 0, y el elemento del bucle actual se pone al frente estableciendo el índice z en 1.
Eso es todo. El control deslizante más simple y pequeño del mundo está listo, es confiable y elemental como un rifle de asalto Kalashnikov. Ahora todo el mazo está funcionando y el elemento actual del pseudo bucle pasa a primer plano. Todo funciona sin un tercero en JavaScript puro.
Añade efectos
Rotor (como lo llamé) resultó demasiado simple y quería agregar algunos efectos de transición. Para hacer esto, ya tienes que usar una biblioteca que sepa cómo animar CSS con geniales efectos de suavizado (hay 43 de ellos en RevolveR).
Aquí está la lista:
let launch = RR.browser;
RR.allowSlide = true;
var e = RR.sel('figure img')
let i = 0;
void setInterval(
() => {
if( e && RR.allowSlide ) {
RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {
e[ i ].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {
e[ i ].style.zIndex = 1;
});
});
}
},
3000);
Aquí, se implementa una secuencia de devolución de llamada para completar el estado de la animación, que en el tiempo total se ajusta durante el tipo de temporizador setInterval, y obtenemos transiciones geniales con desvanecimiento y parpadeo.
Todo está bien, pero también agregaremos un retraso al voltear la bandera cuando el puntero esté sobre el escenario:
RR.event('figure img', 'mouseenter', () => {
RR.allowSlide = null;
RR.event('figure img', 'mouseleave', () => {
RR.allowSlide = true;
});
});
Rotor de RevolveR Labs en acción
Vea el Rotor en acción aquí .
Como puede ver, aquí tampoco hay tanto código, y se pueden implementar efectos más complejos e interesantes. Pero eso depende de ti.