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.
3 comentários sobre “Tutorial de como fazer o efeito parallax com CSS”