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


Descrição

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.

1
2
3
4
5
6
7
8
9
<!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.

01
02
03
04
05
06
07
08
09
10
11
12
13
.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;
}

Pronto, o parallax está pronto, você pode criar vários em sua página, basta atribuir uma nova imagem a uma nova classe e acrescenta-la a uma div.

  • Curtir (+1) 1


Comentários Recomendados

3 horas atrás, 403 - Forbiddeen disse:

Eu amo esse efeito e os clientes piram 😛 

É uma coisa simples e fica extremamente bonito!

  • Curtir (+1) 1

Compartilhar este comentário


Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora