0 Compartilhamentos 65 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

Markdown // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,809 visualizações
Vídeos
1,655 compartilhamentos6,809 visualizações

Markdown // Dicionário do Programador

Thais Cardoso de Mello - 21 de janeiro de 2019

Markdown é o termo falado nesse Dicionário do Programador. Conheça mais sobre essa linguagem de marcação.

Idade: Estou Velho para Ser Programador? // CAC #08
Vídeos
1,655 compartilhamentos6,813 visualizações
Vídeos
1,655 compartilhamentos6,813 visualizações

Idade: Estou Velho para Ser Programador? // CAC #08

Thais Cardoso de Mello - 17 de janeiro de 2019

Um assunto recorrente pedido por nossos CDFs é para falarmos sobre a relação da Idade com o mercado de trabalho em tecnologia. Será que estou velho para ser programador?

Manifesto Ágil: Retrospectivas Lúdicas
Artigos
16 visualizações
Artigos
16 visualizações

Manifesto Ágil: Retrospectivas Lúdicas

Plataformatec - 14 de janeiro de 2019

Conquistando melhoria contínua através de uma estruturar lúdica, estimulando o pensamento crítico e a atenção dos membros durante a dinâmica.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Agile // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,813 visualizações
1,655 compartilhamentos6,813 visualizações

Agile // Dicionário do Programador

Thais Cardoso de Mello - 14 de janeiro de 2019
Promoções de Jogos do Final de Semana (11/01)
Notícias
25 visualizações
25 visualizações

Promoções de Jogos do Final de Semana (11/01)

Carlos L. A. da Silva - 11 de janeiro de 2019
God of War: segredos dos bastidores do melhor jogo de 2018
Artigos
23 visualizações
23 visualizações

God of War: segredos dos bastidores do melhor jogo de 2018

Carlos L. A. da Silva - 11 de janeiro de 2019
As 5 Melhores Linguagens para 2019 // Vlog #86
Vídeos
1,655 compartilhamentos6,820 visualizações
1,655 compartilhamentos6,820 visualizações

As 5 Melhores Linguagens para 2019 // Vlog #86

Thais Cardoso de Mello - 10 de janeiro de 2019