0 Compartilhamentos 24 Views

Como criar um slideshow sem usar uma linha de JavaScript

30 de novembro de 2018

No desenvolvimento web hoje em dia nós meio que nos tornamos dependentes do JavaScript, seja escrevendo efeitos e funções na mão, seja empregando frameworks cada vez mais complexos para resultados simples. Com isso, vem uma sucessão de dependências, versões, problemas de manutenção, compatibilidade de navegadores…

Já estamos nessa há tanto tempo que algumas vezes esquecemos que existem outras formas de implementar as mesmas soluções. Outras vezes, nós sequer sabíamos que era possível fazer algo sem o uso de JavaScript! Você sabia que é possível criar um slideshow, um carrossel de imagens que vão passando automaticamente, sem uma única linha de script?

Não é mágica, nem gambiarra, apenas um bom uso do poder do CSS.

Você começa da mesma forma que começaria um slideshow convencional: com um elemento que irá conter as imagens e atribuindo uma classe a ele. Esse elemento irá “mascarar” a existência das outras imagens. No nosso exemplo, usaremos um <section class=”carrossel-mascara”> para facilitar a compreensão. Esse elemento terá uma largura fixa e a propriedade overflow configurada para “hidden”, para que seja exibida apenas uma imagem de cada vez e as imagens não gerem uma nova linha. Certifique-se também que a largura do container e a largura das imagens sejam idênticas, para gerar uma transição suave.

<section class=”carrossel-mascara”>
<div class=”carrossel-container slide”>
<img src=”https://codigofonte.com.br/wp-content/uploads/2018/08/tekken-7.jpg”/>
<div class=”carrossel-texto”>
<p>É possível até mesmo inserir texto entre os slides!</p>
</div>
<img src=”https://codigofonte.com.br/wp-content/uploads/2018/10/shadow-warrior-2.jpg”/>
<img src=”https://codigofonte.com.br/wp-content/uploads/2018/08/prey-mooncrash.jpg”/>
</div>
</section>

O CSS dos elementos que envolvem o slideshow ficaria assim:

.carrossel-mascara{
width: 600px; /* tem a mesma largura das imagens*/
margin: 0 auto;
overflow: hidden;
font-size: 0; /* para remover o espaço entre elementos-filho marcados como inline-block*/
}

.carrossel-container {
width: 2400px;  /* a soma da largura de todos os elementos */
transition: 1s ease;
height: 337px; /* tem a mesma altura das imagens */
}

Especifique também o tamanho de cada elemento interno, para que não haja margem para erros de renderização:

.carrossel-container img, .carrossel-texto {
width: 600px;
height: auto;
display: inline-block;
vertical-align:top;
font-size: 16px;
margin: 0 auto;
}

.carrossel-texto {
height: 337px;
position: relative;
}

.carrossel-texto p {
position: relative;
text-align: center;
}

A grande pergunta agora é: como criar a animação sem usar JavaScript? Usando CSS Animation na classe “slide” . Essa animação irá mover os elementos pelo eixo de X, enquanto o elemento da frente atua como uma máscara, simulando uma transição.

.slide {
animation: slide 20s ease infinite;
}

Para que a transição seja perfeita, será necessário fazer um cálculo simples: multiplicar o número de elementos que compõe o carrossel pelo tempo desejado de cada transição. Desta forma, se queremos uma transição que dure cinco segundos e temos, de acordo com o exemplo acima, quatro slides (três com imagens e um com texto), o resultado final da animação seria 5×4 = 20.

Mas existe um truque adicional: keyframes. Como está, nossa animação passa direto, sem nunca realmente parar em cada slide, o que prejudica a experiência do usuário. Não é assim que um carrossel em JavaScript funcionaria! Para simular a pausa entre cada elemento, precisamos adicionar keyframes falsos por cada slide. Durante esses frames invisíveis, a transição não acontece.

@keyframes slide {
0% {
transform: translateX(0%);
}

12.5% {
transform: translateX(0%);
}

25% {
transform: translateX(-25%);
}

37.5% {
transform: translateX(-25%);
}

50% {
transform: translateX(-50%);
}

62.5% {
transform: translateX(-50%);
}

75% {
transform: translateX(-75%);
}

87.5% {
transform: translateX(-75%);
}

99% {
transform: translateX(-75%);
}

100% {
transform: translateX(0);
}
}

Perceba que isso acima é CSS puro, não foi necessário adicionar nenhum “keyframe” ao código HTML e esse recurso funcionaria com qualquer número de slides.

Se você deseja simular a pausa quando o usuário move o mouse sobre a animação, também é possível fazer isso sem usar JavaScript. Basta manipular o evento :hover do elemento para mudar o estado da animação:

.carrossel-container:hover {
animation-play-state: paused;
}

Desta forma, você consegue um carrossel de imagens, sem mexer em scripts, sem carregar arquivos adicionais no navegador do usuário e perfeitamente funcional.

Você pode se interessar

Promoções de Jogos do Final de Semana (14/12)
Notícias
15 visualizações
Notícias
15 visualizações

Promoções de Jogos do Final de Semana (14/12)

Carlos L. A. da Silva - 14 de dezembro de 2018

Confira as melhores ofertas de jogos de PC para o final de semana.

Rastros Digitais: A sua vida está na Internet
Artigos
8 visualizações
Artigos
8 visualizações

Rastros Digitais: A sua vida está na Internet

Redação - 14 de dezembro de 2018

Tudo aquilo que fazemos deixa marcas e, na internet, não é diferente. Saiba mais sobre os rastros digitais e os cuidados que você deve tomar!

IoT: Nossa Casa Automatizada // Unboxing Google Home Hub – Vlog #83
Vídeos
1,655 compartilhamentos6,814 visualizações
Vídeos
1,655 compartilhamentos6,814 visualizações

IoT: Nossa Casa Automatizada // Unboxing Google Home Hub – Vlog #83

Thais Cardoso de Mello - 13 de dezembro de 2018

Apresentamos Google Home Hub! Confira e descubra o que esse gadget pode fazer por você.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Retrospectiva 1998!
Artigos
19 visualizações
19 visualizações

Retrospectiva 1998!

Carlos L. A. da Silva - 13 de dezembro de 2018
RegExp // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,811 visualizações
1,655 compartilhamentos6,811 visualizações

RegExp // Dicionário do Programador

Thais Cardoso de Mello - 10 de dezembro de 2018
Promoções de Jogos do Final de Semana (07/12)
Notícias
26 visualizações
26 visualizações

Promoções de Jogos do Final de Semana (07/12)

Carlos L. A. da Silva - 7 de dezembro de 2018
Entenda o formato de imagem WebP
Artigos
20 visualizações
20 visualizações

Entenda o formato de imagem WebP

Carlos L. A. da Silva - 6 de dezembro de 2018