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

02/01/19     CSS Programação Tutorial Web Design

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.


<!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;
}

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.

Surgindo dúvidas coloque nos comentários.



Novidades do BT por email

Coloque abaixo eu email para receber em primeira mão todas as novas matérias do BT, de tutoriais, cursos e inspirações!

Comente aqui

Publique um comentário abaixo

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

compartilhe
compartilhar no Facebook compartilhar no Twitter compartilhar no Linkedin compartilhar no Pintrest compartilhar no WhatzApp compartilhar no Skype compartilhar no pocket
Sobre o BT

Tudo começou com uma simples ajuda, um colega de trabalho estava tentando criar o seu álbum de fotos digital com uma música de fundo para poder dar de presente em seu casamento, até ai não tem nada ver com Bons Tutoriais, mas vamos chegar lá... Veja mais.

Patrocínio
Desenvolvimento de identidades visuais e estratégias de marketing digital
Recomendamos
AE Dicas Comunique 9 Minuto Design Mkt News Pixel Coffee Publicinove Revelando Ideias Sala7Design Tutorial Web Design
Criar um site

© Bons Tutoriais | Desde 2008 - Direitos reservados. ❤ Design | Ps+Ai+In | PHP+HTML+CSS | WordPress