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

Revolução: cinco anos de Satya Nadella no comando da Microsoft
Artigos
8 visualizações
Artigos
8 visualizações

Revolução: cinco anos de Satya Nadella no comando da Microsoft

Carlos L. A. da Silva - 18 de fevereiro de 2019

Como o novo CEO mudou completamente a percepção pública da Microsoft e conduziu a empresa para uma posição mais amigável na indústria.

Redux // Dicionário do Programador
Vídeos
5 visualizações
Vídeos
5 visualizações

Redux // Dicionário do Programador

Thais Cardoso de Mello - 18 de fevereiro de 2019

Redux é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

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

Promoções de Jogos do Final de Semana (15/02)

Carlos L. A. da Silva - 15 de fevereiro de 2019

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

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como salvar seus dados do Google Plus
Dicas
11 visualizações
11 visualizações

Como salvar seus dados do Google Plus

Carlos L. A. da Silva - 15 de fevereiro de 2019
Reagindo a Vagas de Emprego para Programadores // Vlog React #89
Vídeos
1,655 compartilhamentos6,812 visualizações
1,655 compartilhamentos6,812 visualizações

Reagindo a Vagas de Emprego para Programadores // Vlog React #89

Thais Cardoso de Mello - 14 de fevereiro de 2019
Manifesto Ágil: Tipos de demanda e classes de serviço
Artigos
16 visualizações
16 visualizações

Manifesto Ágil: Tipos de demanda e classes de serviço

Plataformatec - 12 de fevereiro de 2019
Mark Zuckerberg conseguiu destruir o Google Plus
Artigos
35 visualizações
35 visualizações

Mark Zuckerberg conseguiu destruir o Google Plus

Carlos L. A. da Silva - 11 de fevereiro de 2019