Como criar: rolagem paralela

Aprenda a usar CSS para criar o efeito de rolagem 'paralela'.

Rolagem Paralela

A rolagem paralela é uma tendência de design de site, onde o conteúdo de fundo (por exemplo, imagens) se move a uma velocidade diferente do conteúdo de primeiro plano enquanto rola. Clique no link abaixo para ver a diferença entre sites com e sem rolagem paralela.

Demonstração com efeito de rolagem paralela

Demonstração sem efeito de rolagem paralela

Atenção:A rolagem paralela não está sempre disponível em dispositivos móveis/smartphones. No entanto, você pode desativar este efeito em dispositivos móveis usando consultas de mídia (veja o último exemplo desta página).

Como criar o efeito de rolagem paralela

Use um elemento contêiner e adicione uma imagem de fundo com uma altura específica ao contêiner. Em seguida, use background-attachment: fixed Cria o efeito real de rolagem paralela. Outras propriedades de fundo são usadas para centralizar e dimensionar perfeitamente a imagem:

instância em pixels

<style>
.parallax {
  /* Imagem usada */
  background-image: url("img_parallax.jpg");
  /* Define uma altura específica */
  min-height: 500px;
  /* Cria o efeito de rolagem paralela */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Elemento contêiner -->
<div class="parallax"></div>

Experimente pessoalmente

O exemplo acima usa pixels para definir a altura da imagem. Se você quiser usar porcentagem, por exemplo 100%, para que a imagem se ajuste à tela inteira, defina a altura do contêiner de desfoque para 100%. Atenção: Você também deve definir height: 100% Aplicado a <html> e <body>:

instância em porcentagem

body, html {
  height: 100%;
}
.parallax {
  /* Imagem usada */
  background-image: url("img_parallax.jpg");
  /* Altura total */
  height: 100%;
  /* Cria o efeito de rolagem paralela */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Experimente pessoalmente

Alguns dispositivos móveis ao usar background-attachment: fixed pode apresentar problemas. No entanto, você pode desativar o efeito de rolagem paralela em dispositivos móveis usando consultas de mídia:

instância

/* Desativa a rolagem paralela em todos os tablets e smartphones. Se necessário, pode aumentar/reduzir os pixels */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

Experimente pessoalmente

No código acima, quando a largura da tela for menor ou igual a 1366 pixels, o efeito de rolagem paralela será desativado, o que é aplicável à maioria dos tablets e smartphones. Isso é feito alterando .parallax da classe background-attachment propriedade de fixed a até scroll