Como fazer parallax apenas com CSS?
O Parallax é um efeito bastante utilizado no front-end de muitos sites. O que nem todo mundo sabe é que é possível fazê-lo com o CSS. Saiba como aqui!(...)
Autor: Redação Impacta
O Parallax é um efeito utilizado no desenvolvimento front-end que se tornou bastante conhecido nos últimos tempos. Inspirado nos jogos e desenhos clássicos, esse recurso se tornou uma tendência na web devido à sua capacidade de dar profundidade às páginas.
Além disso, a técnica pode ser implementada por meio de linguagens e tecnologias como o Javascript ou até mesmo com o CSS puro, sendo possível obter diversos resultados interessantes, dependendo da criatividade dos designers e desenvolvedores do projeto.
Como mencionado, o Parallax pode ser feito utilizando apenas HTML e CSS. Então, falaremos neste post sobre como implementá-lo por meio dessas linguagens. Quer saber como isso pode ser feito? Continue a leitura e confira!
O que é o efeito Parallax?
Parallax é o termo utilizado para descrever o efeito produzido pelo movimento de dois ou mais elementos em uma tela que estão — ou parecem estar — a diferentes distâncias do ponto de observação.
É um ótimo recurso para oferecer mais profundidade de campo a jogos 2D a partir da velocidade de movimento dos elementos do cenário, geralmente por meio de movimentos do mouse, teclado ou da rolagem de tela, no caso de páginas web.
Para entender seu funcionamento, basta imaginar a área da tela do dispositivo como um plano cartesiano cuja origem é o canto superior esquerdo e um esquema de camadas em que os elementos podem ser posicionados.
Assim, a partir de um ponto de referência no plano, a posição dos elementos pode ser calculada para qualquer lugar da tela. Enquanto isso, também podemos obter diferentes velocidades no movimento do objeto ao configurar a distância que cada uma das camadas estará do ponto de observação.
O efeito Parallax também é bastante utilizado no desenvolvimento web para permitir que os sites tenham ideia de profundidade. Nesse sentido, é comum encontrar tutoriais que utilizam, por exemplo, bibliotecas em Javascript. Entretanto, essa técnica também pode ser reproduzida facilmente apenas com HTML e CSS, como explicaremos a seguir.
Como fazer Parallax com CSS?
Para a nossa demonstração, contaremos com dois arquivos: o parallax.html e o style.css, mas você também pode, é claro, utilizar a tag <style> e criar um exemplo em um único arquivo.
1. Estrutura HTML
Iniciaremos com uma estrutura HTML simples, como é possível conferir a seguir:
<html>
<head>
<title>Parallax – Impacta Tecnologia</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”viewport”>
<section class=”sec bgimage1″>
<p class=”ptext”>Texto da primeira seção</p>
</section>
<section class=”sec bgimage2″>
<p class=”ptext”>Testando o Parallax</p>
</section>
<section class=”sec bgimage3″>
<p class=”ptext”>Impacta Tecnologia</p>
</section>
<section class=”sec bgimage4″>
<p class=”ptext”>Mais uma seção com Parallax</p>
</section>
</div>
</body>
</html>
O código acima é bastante sucinto e consiste, basicamente, na definição do título, link da folha de estilos e um container que comporta quatro seções com um parágrafo em cada uma.
Definidas as classes na estrutura, agora partimos para o arquivo CSS, que explicaremos por partes.
2. Corpo da página
body {
margin: 0;
padding: 0;
}
A configuração do corpo é bastante simples, consistindo apenas na eliminação das margens e padding.
3. Classe do container principal
O container principal é uma div que utiliza as configurações definidas em uma classe que chamaremos de viewport. Confira a seguir:
.viewport {
height: 100vh;
overflow-x: hidden;
perspective: 2px;
transform-style: preserve-3d;
}
Primeiramente, como o elemento precisa ter uma altura definida para o efeito funcionar, definimos a propriedade height como 100vh — o que significa utilizar 100% da altura da janela de visualização.
Após isso, você poderá perceber que o tamanho das imagens criará uma barra de rolagem horizontal. Para desativar esse recurso, utilizamos a linha overflow-x: hidden;.
Agora vamos imaginar um eixo Z no plano cartesiano da tela. A propriedade perspective serve para definir o que seria a distância entre o ponto de observação e o elemento. Quanto maior o valor inserido, mais próximo o elemento parecerá estar. Para o efeito contrário, basta utilizar um valor negativo.
Por fim, a propriedade transform-style define se os elementos dentro da div viewport devem ser processados como se estivessem em um plano 2D ou 3D. No caso do nosso código, utilizamos o preserve-3d para indicar que os elementos devem continuar em três dimensões.
4. Classe das seções
Em seguida, é preciso definir as propriedades de estilo de cada uma das seções. Para isso, criamos a classe sec e informamos as suas propriedades.
.sec {
position: relative;
height: 100vh;
min-height: 500px;
transform-style: inherit;
}
Nesse ponto, definiremos a propriedade position como relative, para que as seções se adequem às coordenadas do elemento pai.
Além disso, precisamos informar uma altura para a nossa seção. No exemplo, temos uma altura de 100vh com um mínimo de 500 pixels, na terceira propriedade.
Por fim, também contaremos com o preserve-3d na propriedade transform-style das seções. Entretanto, como o elemento pai já conta com essa mesma configuração, podemos definir, em vez disso, simplesmente o valor inherit, que fará com que a seção utilize o valor encontrado na mesma propriedade da .viewport.
5. Pseudo-elemento para as seções
Além das propriedades que vimos, também é necessário criar um pseudo-elemento em CSS, que será responsável por definir dimensões e posição do background das seções. Confira o exemplo a seguir:
.sec::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: “”;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
transform: translateZ(-1px) scale(1.5);
}
As primeiras seis propriedades serão responsáveis por garantir que o pseudo-elemento tenha o mesmo tamanho da .sec original. Isso é possível ao definir a position como absolute e zerar o padding em todas as direções, por meio das propriedades top, right, bottom e left. Além disso, é importante informar um content para que possamos visualizar o elemento.
Após essas informações, utilizamos a propriedade z-index com valor negativo para garantir que a imagem de fundo não cubra os demais elementos e, ainda a respeito do plano de fundo, inserimos as propriedades background-size, background-repeat e background-position para fazer com que a imagem se estenda por todo o pseudo-elemento de forma centralizada e sem se repetir.
Por fim, temos a propriedade transform no estilo dos pseudo-elementos. O translateZ(-1px) é responsável por fazer com que o plano de fundo das seções pareça mais distante. Isso é possível ao passar um valor negativo para a função, já que o container viewport — que está mais próximo do usuário — não tem valor definido para o eixo Z.
Após isso, você poderá notar que a imagem de fundo ficou pequena demais. Para contornar essa alteração, utilizamos o scale(1.5), que amplia a imagem.
6. Classe para o texto
Nesse ponto, adicionamos uma classe para formatar o estilo dos parágrafos, como você pode conferir abaixo.
.ptext {
position: absolute;
top: 25%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 40px;
text-align: center;
}
Optamos apenas por manter a posição como absolute e fazer ajustes simples no tamanho, cor e posição das tags de parágrafo do nosso HTML.
7. Classe dos planos de fundo das seções
Nestas últimas classes, definiremos apenas um pseudo-elemento para cada seção, contendo as propriedades background-image de cada uma delas. Confira o exemplo abaixo.
.bgimage1::before {
background-image: url(“https://images.unsplash.com/photo-1502083728181-687546e77613?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80”);
}
.bgimage2::before {
background-image: url(“https://images.unsplash.com/photo-1502759683299-cdcd6974244f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80”);
}
.bgimage3::before {
background-image: url(“https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80”);
}
.bgimage4::before {
background-image: url(“https://images.unsplash.com/photo-1466853817435-05b43fe45b39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMzk2fQ&auto=format&fit=crop&w=1889&q=80”);
}
Após esse processo, basta abrir o arquivo HTML com a folha de estilos salva no mesmo diretório e, então, tudo deverá funcionar corretamente.
Como você pôde ver, é relativamente simples implementar Parallax em projetos web por meio dos recursos do CSS. Entretanto, para obter bons resultados, é fundamental planejar com a equipe de design como essa técnica poderá será inserida no projeto, definindo detalhes como cores, sobreposição de elementos, velocidade e permanência em tela, por meio de protótipos e wireframes.
Portanto, tendo em mente como utilizar esse recurso de forma visualmente agradável e sabendo qual é a estrutura e configurações de estilo necessárias para aplicar a técnica, será possível contar com um projeto eficiente em expressar profundidade de campo e bom gosto.
Já aprendeu a fazer o efeito Parallax com CSS? Então, compartilhe este post com seus amigos e ajude-os a implementar essa técnica em seus projetos!
Isso não funciona, é assim que se aprende na Impacta?
Olá, Marcio. O que especificamente não funciona? Apesar dos artigos do Blog Impacta trazerem dicas e informações sobre as áreas que a Impacta ensina, esse conteúdo não tem nenhum relação com os nossos Cursos de Desenvolvimento ou CSS.