Como fazer - Rolagem Parallax
Aprenda como criar um efeito de rolagem "paralaxe" com CSS.
Paralaxe
A rolagem de paralaxe é uma tendência de web site em que o conteúdo de fundo (ou seja, uma imagem) é movido a uma velocidade diferente do conteúdo de primeiro plano durante a rolagem. Clique nos links abaixo para ver a diferença entre um site com e sem rolagem parallax.
Demonstração com rolagem parallax
Demonstração sem rolagem de paralaxe
Observação: a rolagem parallax nem sempre funciona em dispositivos móveis/smartphones. No entanto, você pode usar consultas de mídia para desativar o efeito em dispositivos móveis (veja o último exemplo nesta página).
Como criar um efeito de rolagem de paralaxe
Use um elemento de contêiner e adicione uma imagem de plano de fundo ao contêiner com uma altura específica. Em seguida, use o background-attachment: fixed
para criar o efeito de paralaxe real. As outras propriedades de fundo são usadas para centralizar e dimensionar a imagem perfeitamente:
Exemplo com pixels
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
O exemplo acima usou pixels para definir a altura da imagem. Se você quiser usar porcentagem, por exemplo, 100%, para que a imagem caiba em toda a tela, defina a altura do contêiner de paralaxe para 100%. Nota: Você também deve se inscrever height: 100%
em <html> e <body>:
Exemplo com porcentagem
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Alguns dispositivos móveis têm um problema com o background-attachment: fixed
. No entanto, você pode usar consultas de mídia para desativar o efeito de paralaxe para dispositivos móveis:
Exemplo
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}