{"id":14413,"date":"2019-05-15T14:44:54","date_gmt":"2019-05-15T17:44:54","guid":{"rendered":"http:\/\/www.impacta.com.br\/blog\/?p=14413"},"modified":"2019-05-15T14:44:54","modified_gmt":"2019-05-15T17:44:54","slug":"como-fazer-parallax-apenas-com-css","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/como-fazer-parallax-apenas-com-css\/","title":{"rendered":"Como fazer parallax apenas com CSS?"},"content":{"rendered":"

O Parallax \u00e9 um efeito utilizado no\u00a0desenvolvimento front-end<\/a>\u00a0que se tornou bastante conhecido nos \u00faltimos tempos. Inspirado nos jogos e desenhos cl\u00e1ssicos, esse recurso se tornou uma tend\u00eancia na web devido \u00e0 sua capacidade de dar profundidade \u00e0s p\u00e1ginas.<\/span>
\nAl\u00e9m disso, a t\u00e9cnica pode ser implementada por meio de linguagens e tecnologias como o Javascript <\/a>ou at\u00e9 mesmo com o CSS puro, sendo poss\u00edvel obter diversos resultados interessantes, dependendo da criatividade dos designers e desenvolvedores do projeto.<\/span>
\nComo mencionado, o Parallax pode ser feito utilizando apenas\u00a0HTML e CSS<\/a>. Ent\u00e3o, falaremos neste post sobre como implement\u00e1-lo por meio dessas linguagens. Quer saber como isso pode ser feito? Continue a leitura e confira!<\/span><\/p>\n

O que \u00e9 o efeito Parallax?<\/span><\/strong><\/h2>\n

Parallax \u00e9 o termo utilizado para descrever o efeito produzido pelo movimento de dois ou mais elementos em uma tela que est\u00e3o \u2014 ou parecem estar \u2014 a diferentes dist\u00e2ncias do ponto de observa\u00e7\u00e3o.<\/span>
\n\u00c9 um \u00f3timo recurso para oferecer mais profundidade de campo a\u00a0jogos 2D<\/a>\u00a0a partir da velocidade de movimento dos elementos do cen\u00e1rio, geralmente por meio de movimentos do mouse, teclado ou da rolagem de tela, no caso de p\u00e1ginas web.<\/span>
\nPara entender seu funcionamento, basta imaginar a \u00e1rea da tela do dispositivo como um plano cartesiano cuja origem \u00e9 o canto superior esquerdo e um esquema de camadas em que os elementos podem ser posicionados.<\/span>
\nAssim, a partir de um ponto de refer\u00eancia no plano, a posi\u00e7\u00e3o dos elementos pode ser calculada para qualquer lugar da tela. Enquanto isso, tamb\u00e9m podemos obter diferentes velocidades no movimento do objeto ao configurar a dist\u00e2ncia que cada uma das camadas estar\u00e1 do ponto de observa\u00e7\u00e3o.<\/span>
\nO efeito Parallax tamb\u00e9m \u00e9 bastante utilizado no\u00a0desenvolvimento web<\/a>\u00a0para permitir que os sites tenham ideia de profundidade. Nesse sentido, \u00e9 comum encontrar tutoriais que utilizam, por exemplo, bibliotecas em Javascript. Entretanto, essa t\u00e9cnica tamb\u00e9m pode ser reproduzida facilmente apenas com HTML e CSS, como explicaremos a seguir.<\/span><\/p>\n

Como fazer Parallax com CSS?<\/span><\/strong><\/h2>\n

Para a nossa demonstra\u00e7\u00e3o, contaremos com dois arquivos: o parallax.html e o style.css<\/strong>, mas voc\u00ea tamb\u00e9m pode, \u00e9 claro, utilizar a tag <style> e criar um exemplo em um \u00fanico arquivo.<\/span><\/p>\n

1. Estrutura HTML<\/span><\/strong><\/h3>\n

Iniciaremos com uma estrutura HTML simples, como \u00e9 poss\u00edvel conferir a seguir:<\/span>
\n<html><\/span>
\n\u00a0\u00a0\u00a0<head><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<title>Parallax – Impacta Tecnologia<\/title><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<link rel=”stylesheet” href=”style.css”><\/span>
\n\u00a0\u00a0\u00a0<\/head><\/span>
\n\u00a0\u00a0\u00a0<body><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=”viewport”><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<section class=”sec bgimage1″><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p class=”ptext”>Texto da primeira se\u00e7\u00e3o<\/p><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/section><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<section class=”sec bgimage2″><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p class=”ptext”>Testando o Parallax<\/p><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/section><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<section class=”sec bgimage3″><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p class=”ptext”>Impacta Tecnologia<\/p><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/section><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<section class=”sec bgimage4″><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p class=”ptext”>Mais uma se\u00e7\u00e3o com Parallax<\/p><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/section><\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div><\/span>
\n\u00a0\u00a0\u00a0<\/body><\/span>
\n<\/html><\/span>
\nO c\u00f3digo acima \u00e9 bastante sucinto e consiste, basicamente, na defini\u00e7\u00e3o do t\u00edtulo, link da folha de estilos e um container que comporta quatro se\u00e7\u00f5es com um par\u00e1grafo em cada uma.<\/span>
\nDefinidas as classes na estrutura, agora partimos para o arquivo CSS, que explicaremos por partes.<\/span><\/p>\n

2. Corpo da p\u00e1gina<\/span><\/strong><\/h3>\n

body {<\/span>
\n\u00a0margin: 0;<\/span>
\n\u00a0padding: 0;<\/span>
\n}<\/span>
\nA configura\u00e7\u00e3o do corpo \u00e9 bastante simples, consistindo apenas na elimina\u00e7\u00e3o das margens e padding.<\/span><\/p>\n

3. Classe do container principal<\/span><\/strong><\/h3>\n

O container principal \u00e9 uma div que utiliza as configura\u00e7\u00f5es definidas em uma classe que chamaremos de viewport. Confira a seguir:<\/span>
\n.viewport {<\/span>
\n\u00a0height: 100vh;<\/span>
\n\u00a0overflow-x: hidden;<\/span>
\n\u00a0perspective: 2px;<\/span>
\n\u00a0transform-style: preserve-3d;<\/span>
\n}<\/span>
\nPrimeiramente, como o elemento precisa ter uma altura definida para o efeito funcionar, definimos a propriedade height como 100vh \u2014 o que significa utilizar 100% da altura da janela de visualiza\u00e7\u00e3o.<\/span>
\nAp\u00f3s isso, voc\u00ea poder\u00e1 perceber que o tamanho das imagens criar\u00e1 uma barra de rolagem horizontal. Para desativar esse recurso, utilizamos a linha overflow-x: hidden;.<\/span>
\nAgora vamos imaginar um eixo Z no plano cartesiano da tela. A propriedade perspective serve para definir o que seria a dist\u00e2ncia entre o ponto de observa\u00e7\u00e3o e o elemento. Quanto maior o valor inserido, mais pr\u00f3ximo o elemento parecer\u00e1 estar. Para o efeito contr\u00e1rio, basta utilizar um valor negativo.<\/span><\/p>\n

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\u00f3digo, utilizamos o preserve-3d para indicar que os elementos devem continuar em tr\u00eas dimens\u00f5es.<\/span><\/p>\n

4. Classe das se\u00e7\u00f5es<\/span><\/strong><\/h3>\n

Em seguida, \u00e9 preciso definir as propriedades de estilo de cada uma das se\u00e7\u00f5es. Para isso, criamos a classe sec e informamos as suas propriedades.<\/span>
\n.sec {<\/span>
\n\u00a0position: relative;<\/span>
\n\u00a0height: 100vh;<\/span>
\n\u00a0min-height: 500px;<\/span>
\n\u00a0transform-style: inherit;<\/span>
\n}<\/span>
\nNesse ponto, definiremos a propriedade position como relative, para que as se\u00e7\u00f5es se adequem \u00e0s coordenadas do elemento pai.<\/span>
\nAl\u00e9m disso, precisamos informar uma altura para a nossa se\u00e7\u00e3o. No exemplo, temos uma altura de 100vh com um m\u00ednimo de 500 pixels, na terceira propriedade.<\/span>
\nPor fim, tamb\u00e9m contaremos com o preserve-3d na propriedade transform-style das se\u00e7\u00f5es. Entretanto, como o elemento pai j\u00e1 conta com essa mesma configura\u00e7\u00e3o, podemos definir, em vez disso, simplesmente o valor inherit, que far\u00e1 com que a se\u00e7\u00e3o utilize o valor encontrado na mesma propriedade da .viewport.<\/span><\/p>\n

5. Pseudo-elemento para as se\u00e7\u00f5es<\/span><\/strong><\/h3>\n

Al\u00e9m das propriedades que vimos, tamb\u00e9m \u00e9 necess\u00e1rio criar um pseudo-elemento em CSS, que ser\u00e1 respons\u00e1vel por definir dimens\u00f5es e posi\u00e7\u00e3o do background das se\u00e7\u00f5es. Confira o exemplo a seguir:<\/span>
\n.sec::before {<\/span>
\n\u00a0position: absolute;<\/span>
\n\u00a0top: 0;<\/span>
\n\u00a0right: 0;<\/span>
\n\u00a0bottom: 0;<\/span>
\n\u00a0left: 0;<\/span>
\n\u00a0content: “”;<\/span>
\n\u00a0<\/span>
\n\u00a0z-index: -1;<\/span>
\n\u00a0background-size: cover;<\/span>
\n\u00a0background-repeat: no-repeat;<\/span>
\n\u00a0background-position: center center;<\/span>
\n\u00a0<\/span>
\n\u00a0transform: translateZ(-1px) scale(1.5);<\/span>
\n}<\/span>
\nAs primeiras seis propriedades ser\u00e3o respons\u00e1veis por garantir que o pseudo-elemento tenha o mesmo tamanho da .sec original. Isso \u00e9 poss\u00edvel ao definir a position como absolute e zerar o padding em todas as dire\u00e7\u00f5es, por meio das propriedades top, right, bottom e left. Al\u00e9m disso, \u00e9 importante informar um content para que possamos visualizar o elemento.<\/span>
\nAp\u00f3s essas informa\u00e7\u00f5es, utilizamos a propriedade z-index com valor negativo para garantir que a imagem de fundo n\u00e3o 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.<\/span>
\nPor fim, temos a propriedade transform no estilo dos pseudo-elementos. O translateZ(-1px) \u00e9 respons\u00e1vel por fazer com que o plano de fundo das se\u00e7\u00f5es pare\u00e7a mais distante. Isso \u00e9 poss\u00edvel ao passar um valor negativo para a fun\u00e7\u00e3o, j\u00e1 que o container viewport \u2014 que est\u00e1 mais pr\u00f3ximo do usu\u00e1rio \u2014 n\u00e3o tem valor definido para o eixo Z.<\/span>
\nAp\u00f3s isso, voc\u00ea poder\u00e1 notar que a imagem de fundo ficou pequena demais. Para contornar essa altera\u00e7\u00e3o, utilizamos o scale(1.5), que amplia a imagem.<\/span><\/p>\n

6. Classe para o texto<\/span><\/strong><\/h3>\n

Nesse ponto, adicionamos uma classe para formatar o estilo dos par\u00e1grafos, como voc\u00ea pode conferir abaixo.<\/span>
\n.ptext {<\/span>
\n\u00a0position: absolute;<\/span>
\n\u00a0top: 25%;<\/span>
\n\u00a0width: 100%;<\/span>
\n\u00a0background-color: rgba(0, 0, 0, 0.5);<\/span>
\n\u00a0color: #fff;<\/span>
\n\u00a0font-size: 40px;<\/span>
\n\u00a0text-align: center;<\/span>
\n}<\/span>
\nOptamos apenas por manter a posi\u00e7\u00e3o como absolute e fazer ajustes simples no tamanho, cor e posi\u00e7\u00e3o das tags de par\u00e1grafo do nosso HTML.<\/span><\/p>\n

7. Classe dos planos de fundo das se\u00e7\u00f5es<\/span><\/strong><\/h3>\n

Nestas \u00faltimas classes, definiremos apenas um pseudo-elemento para cada se\u00e7\u00e3o, contendo as propriedades background-image de cada uma delas. Confira o exemplo abaixo.<\/span>
\n.bgimage1::before {<\/span>
\n\u00a0background-image: url(“https:\/\/images.unsplash.com\/photo-1502083728181-687546e77613?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80”);<\/span>
\n}<\/span>
\n.bgimage2::before {<\/span>
\n\u00a0background-image: url(“https:\/\/images.unsplash.com\/photo-1502759683299-cdcd6974244f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80”);<\/span>
\n}<\/span>
\n.bgimage3::before {<\/span>
\n\u00a0background-image: url(“https:\/\/images.unsplash.com\/photo-1439694458393-78ecf14da7f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80”);<\/span>
\n}<\/span>
\n.bgimage4::before {<\/span>
\n\u00a0background-image: url(“https:\/\/images.unsplash.com\/photo-1466853817435-05b43fe45b39?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMzk2fQ&auto=format&fit=crop&w=1889&q=80”);<\/span>
\n}<\/span>
\nAp\u00f3s esse processo, basta abrir o arquivo HTML com a folha de estilos salva no mesmo diret\u00f3rio e, ent\u00e3o, tudo dever\u00e1 funcionar corretamente.<\/span>
\nComo voc\u00ea p\u00f4de ver, \u00e9 relativamente simples implementar Parallax em projetos web por meio dos recursos do CSS. Entretanto, para obter bons resultados, \u00e9 fundamental planejar com a\u00a0equipe de design<\/a>\u00a0como essa t\u00e9cnica poder\u00e1 ser\u00e1 inserida no projeto, definindo detalhes como cores, sobreposi\u00e7\u00e3o de elementos, velocidade e perman\u00eancia em tela, por meio de\u00a0prot\u00f3tipos e wireframes<\/a>.<\/span>
\nPortanto, tendo em mente como utilizar esse recurso de forma visualmente agrad\u00e1vel e sabendo qual \u00e9 a estrutura e configura\u00e7\u00f5es de estilo necess\u00e1rias para aplicar a t\u00e9cnica, ser\u00e1 poss\u00edvel contar com um projeto eficiente em expressar profundidade de campo e bom gosto.<\/span>
\nJ\u00e1 aprendeu a fazer o efeito Parallax com CSS? Ent\u00e3o, compartilhe este post com seus amigos e ajude-os a implementar essa t\u00e9cnica em seus projetos!<\/span><\/p>\n

<\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>