Como criar um efeito "Parallax" em seu site com HTML e CSS

Ter um site atrativo faz muita diferença independente do que você esteja querendo fazer com seu site, e uma das coisas que chamam muita atenção em um site são as imagens com efeito parallax.

Efeito parallax é quando uma imagem que está no fundo do site passa com uma velocidade diferente do resto do conteúdo.

Antes de começarmos este tutorial, clique aqui para conferir como é uma imagem com efeito parallax.

Agora vamos começar.

1º – Crie a estrutura HTML

Neste exemplo faremos o efeito de parallax em uma imagem que está junto com o texto, então dentro da div onde ficará o conteúdo de sua página crie uma nova div com uma classe que será nosso parallax, neste exemplo a chamaremos de ‘parallax’ mesmo.

Veja também!
Aprenda a criar uma textura de margaridas de forma simples no Illustrator

<!DOCTYPE html>
<html>
<body>
<div class="conteudoTuto">
<div class="parallax"></div>
</div>
 
</body>
</html>

Após isso pode colocar o restante do conteúdo de sua página tranquilamente, a única div que precisávamos criar é esta.

2º – Criar o efeito com css

Após ter criado a div responsável por exibir a imagem, temos que criar o css para mostrar a mesma.

Primeiramente defina a imagem que escolheu para ser o background de nossa div, logo em seguida defina a altura que essa div terá, como nossa imagem agora é um background ela precisa ter um tamanho definido.

Agora vem o passo chave para criar o nosso efeito, adicione a propriedade ‘background-attachment’ como ‘fixed’, é aqui que a mágica acontece, a imagem ficará fica no fundo e o restante do conteúdo passará por cima dela criando nosso efeito de parallax, mas ainda não acabou, mas algumas propriedades precisam ser acrescentadas.

Agora que ela está fixa, precisamos posiciona-la e redimensiona-la para que tudo fique certo.

.parallax {
/* Coloque a imagem a ser usada como background */
background-image: url("img/img.jpg");
 
/* Defina uma altura para a visão que o usuário terá da imagem */
min-height: 350px;
 
/* defina o background como fixo e posicione a imagem */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}