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.
