Publicado em por Paulo Künzel

Construindo um slider e parallax com JavaScript

[download id=”257″]

Nesse artigo prático e rápido você verá como construir um slider utilizando apenas o JavaScript, sem precisar importar nenhuma biblioteca e ou editar o CSS fora das funções. O objetivo aqui é trabalhar os conhecimentos de manipulação do DOM e o básico de estrutura de dados.

Configurando o HTML

Então vamos começar. Primeiro é necessário preparar no HTML o local onde será definido slider. Qualquer TAG de bloco serve, mas para simplicidade e por boas práticas, vamos utilizar uma DIV com o ID igual a slider. O código JavaScript ficará separado, mas por se tratar de um exemplo rápido, vamos manter tudo dentro da mesma pasta (incluído as imagens que serão adicionadas).

<html>
<head>
</head>
<body>
  <div id="slider"><div>
  <script src="slider.js"><script>
</body>
</html>

Adicionando uma imagem de fundo

Certo, está área terá o local que utilizaremos como referência, mas neste exemplo, as imagens serão parte do plano de fundo, então além de definir qual imagem aparecerá, teremos que estabelecer um tamanho para ela. Então quando a janela estiver carregada, vamos chamar a função criarSlider() que no momento apenas colocará uma imagem de fundo com tamanho igual a 40% da altura da tela.

window.onload = function(){
  criarSlider();
}
 
function criarSlider(){
  let slider = document.getElementById("slider");
  slider.style.height = "40vh";
  slider.style.backgroundSize = "cover";
  slider.style.backgroundImage = "url(imagem1.jpg)";
}

Adicionando o efeito Parallax

Para fazermos esse efeito de forma fácil e prática, utilizaremos a propriedade “backgroundAttachment” e a definiremos como “fixed”. OBS.: Ainda existem navegadores que não dão suporte ao atributo “fixed” (confira https://caniuse.com/#search=background-att).

function criarSlider(){
  let slider = document.getElementById("slider");
  slider.style.height = "40vh";
  slider.style.backgroundSize = "cover";
  slider.style.backgroundImage = "url(imagem1.jpg)";
  /*Efeito Parallax*/
  slider.style.backgroundAttachment = "fixed";
}

Definindo uma lista de imagens

Com esse código já é possível rodar a tela inicial e você verá sua imagem ocupado todo o espaço da div e com a altura fixa e possui o efeito. No entanto, nada acontece. Para mudarmos isso, vamos utilizar a função JavaScript chamada setInterval() que fará uma ação fixa a cada intervalo de tempo.

Poderíamos definir as imagens que serão passadas de forma fixa, mas para dar mais flexibilidade, vamos coloca-las em um vetor para que uma quantidade indefinida de arquivos possa ser utilizada, reduzindo assim o retrabalho futuro (basta adicionar a nova imagem ao vetor).

Para esta sessão, serão necessárias 3 implementações

  • Adicionar o vetor no começo da função
let imagens = ["imagem1.jpg","imagem2.jpg", "imagem3.jpg"];
  • Substituir a backgroundImage pelo primeiro item do vetor
slider.style.backgroundImage = "url(" + imagens[0] + ")";
  • Adicionar uma variável de contador e a função setInterval() conforme abaixo
let i = 1;
  setInterval(function () {
    slider.style.backgroundImage = "url(" + imagens[i] + ")";
    i = i + 1;
    if (i === imagens.length) {
    i = 0;
  }
}, 3000);

Melhorando o efeito

Você deve ter notado que a troca de imagens está meio crua, apenas piscando rapidamente e alternado entre elas. Para deixar esse efeito mais suave, adicione uma transição entre elas conforme a linha abaixo (pode ser colocado abaixo do style.backgroundSize):

slider.style.transition = "all 400ms linear";

Melhorando o código

Agora temos um slider parallax com um efeito de transição de imagens melhorado. Mas nosso código permite montar apenas um slider por tela pois todas as variáveis foram montadas dentro da função. Vamos passar como parâmetros da função os valores do Id do slider, o vetor de imagens, se será parallax e o tempo de troca entre imagens. Com isso teremos uma função que permite fazer diversos sliders com configurações diferente entre eles e sem precisar alterar muito o código como você pode ver abaixo:

function criarSlider(slider, imagens, isParalalx, tempo){
  let slider = document.getElementById("slider");
  slider.style.height = "40vh";
  slider.style.backgroundSize = "cover";
  slider.style.backgroundImage = "url(" + imagens[0] + ")";
  slider.style.backgroundAttachment = "fixed";
 
  if (isParalalx) {
    slider.style.backgroundAttachment = "fixed";
  }
 
  let i = 1;
  setInterval(function () {
    slider.style.backgroundImage = "url(" + imagens[i] + ")";
    i = i + 1;
    if (i === imagens.length) {
    i = 0;
    }
  }, tempo);
}

Conclusão

O projeto apresentado já é funcional e poderia ser aplicado em qualquer website, mas caso você queira se desafiar, existem coisas que podem ser implementadas. As variáveis de configuração poderiam ser em apenas um objeto com os todos os parâmetros que possam ser configurados e valores padrões (default), poderiam haver conferencias para garantir que dados incorretos ou nulos não travem o slider entre outras possibilidades.

De toda forma, o código do projeto pode ser utilizado em qualquer website pois oferece todas as funcionalidades necessárias para a montagem de forma simples e rápida. Caso você tenha gostado deste artigo, por favor, compartilhe-o e deixe seu comentário. Se você achou um bug ou tem uma sugestão, por favor avise que atualizarei o código.

Deixe um comentário