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.

como fazer o efeito parallax com CSS

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.

Olá, tudo bem com você?

 

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:

 

Downhill Ftw 😀

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.

 

Resumo
Efeito parallax com CSS
Nome do Artigo
Efeito parallax com CSS
Descrição
Tutorial com exemplos práticos de como criar o efeito Parallax com CSS
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

3 comentários sobre “Tutorial de como fazer o efeito parallax com CSS

  1. Espero que me responda. Antes de mais nada parabéns pelo trabalho. O que eu não entendo é como o scroll “revela” uma imagem debaixo da outra? Na primeira parte do teu exemplo o scroll percorreu a mesma imagem, dando a sensação de movimento. OK. Mas logo abaixo, continuando o scroll, aparece em background uma outra imagem que é “revelada” pelo scroll. Forçosamente parecendo estúpido, o background fixed não deveria impedir das imagens aparecerem? Só sendo visível a primeira imagem? Não entendo o que acontece. Valeu.
    1. Olá João, boa tarde, Você diz na terceira imagem? O que pode ocorrer é que se a propriedade ‘background-repeat: no-repeat;’ for definida, no final da imagem será exibido o background que está abaixo da Div.

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado.