O menor e mais simples controle deslizante do mundo
Eu, como um designer de layout na época, entendia perfeitamente como os plug-ins funcionam e repetidamente vasculhei o front-end com uma mente inquisitiva, tentando obter a minificação do código e otimizar o trabalho com CSS ou o mesmo layout.
O controle deslizante nasceu após alguns experimentos com o índice z e, para minha surpresa, o programa tinha apenas 10 linhas. Não transformei as imagens em imagem de fundo e deixei a capacidade de rolar até os blocos de layout.
Aqui está o HTML para o contêiner de cena:
<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>
Vamos adicionar CSS que carregará as tags de imagem em um deck em X: 0 e Y: 0 (topo: 0px e à esquerda: 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;
}
Não uso mais valores estáticos como PX no layout devido ao aparecimento de monitores de 8K e mais, mas faço tudo em unidades de view port escalonáveis, o que me permite evitar as escadas para media-queries e criar interfaces para qualquer resolução de tela.
Agora vamos escrever um manipulador de JavaScript que simplesmente percorrerá o baralho sem nenhum efeito com um intervalo de tempo:
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 limpar na inicialização por 3 segundos e implementar um iterador reconfigurável em um pseudo-loop. A cada próximo tique do cronômetro, altere o Z-index da imagem desejada em ordem. O z-index da imagem anterior é redefinido permanentemente para 0 e o elemento do loop atual é trazido para a frente definindo o z-index para 1.
É isso. O menor e mais simples controle deslizante do mundo está pronto, confiável e elementar como um rifle de assalto Kalashnikov. Agora todo o baralho está funcionando e o elemento atual do pseudo loop vem à tona. Tudo funciona sem terceiros em JavaScript puro.
Adicionar efeitos
Rotor (como eu o chamei) ficou muito simples e eu queria adicionar alguns efeitos de transição. Para fazer isso, você já precisa usar uma biblioteca que saiba como animar CSS com efeitos de atenuação legais (existem 43 deles no RevolveR).
Aqui está a 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);
Aqui, uma sequência de retorno de chamada é implementada para completar o estado da animação, que no tempo total se ajusta durante o tipo de temporizador setInterval e obtemos transições interessantes com esmaecimento e oscilação.
Tudo está bem, mas também adicionaremos um atraso virando a bandeira quando o ponteiro estiver sobre o palco:
RR.event('figure img', 'mouseenter', () => {
RR.allowSlide = null;
RR.event('figure img', 'mouseleave', () => {
RR.allowSlide = true;
});
});
Rotor da RevolveR Labs em ação
Veja o Rotor em ação aqui .
Como você pode ver, não há muito código aqui e efeitos mais complexos e interessantes podem ser implementados. Mas isso depende de você.