Tutorial de como fazer o efeito parallax com CSS

Tutorial bem simples de como fazer o efeito parallax com CSS em uma imagem de background.

Para criar esse efeito no background iremos utilizar a propriedade background-attachment com o valor fixed.

Essa propriedade define se o background irar acompanhar o scroll (valor padrão) ou ficará fixo (fixed).

Exemplo de background fixed:

 

Código utilizado:

<div style="background-image: url('http://rogertakemiya.com.br/wp-content/uploads/2017/03/bg-texture-exemplo.png'); background-attachment: fixed; height: 200px; width: 100%;"></div>

Agora para o efeito ficar mais legal, vamos utilizar a sobreposição de alguns elementos dentro da div.

 

Bem simples, não existe segredo.

Além da propriedade “attachment”, você pode utilizar no mesmo elemento:

• background-position: center;
• background-repeat: no-repeat;
• background-size: cover;

Utilizando essas três propriedades você poderá utilizar uma foto como background e durante o scroll passara a impressão que ela está “andando”, simples efeito de parallax com CSS:

 

Explicando com mais calma..

background-position: center;

O “position” define a posição da imagem utilizada no background, no exemplo é “center”, centralizando a nossa imagem.

background-repeat: no-repeat;

Com o “Repeat” definimos se a imagem deverá se repetir para preencher todo o elemento,  passamos “no-repeat”, sem repetição.

background-size: cover;

“Size” é o tamanho do background, para o efeito parallax passamos “cover”, para que o tamanho da imagem seja ajustada para preencher todo o elemento.

Conclusão

Para o efeito ficar bem “equilibrado” no seu site é interessante você intercalar Divs com e sem o efeito:

div com parallax

div normal, cor sólida

div com parallax

normal, cor sólida ou imagem

Dessa forma a impressão de “profundidade” do efeito será mantida.