Sign in to follow this  

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



Description

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


Recommended Comments

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

Share this comment


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a Comment

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.