Tutorial
Como criar um efeito de rolagem parallax com CSS puro no Chrome
Introdução
O CSS moderno é uma ferramenta poderosa que pode ser usada para criar muitas funcionalidades avançadas de interface de usuário (UI). No passado, essas funcionalidades dependiam de bibliotecas de JavaScript.
Neste guia, você irá configurar algumas linhas de CSS para criar um efeito de rolagem parallax em uma página Web. Serão usadas imagens de placekitten.com como imagens de fundo de espaço reservado.
Assim que completar o tutorial, você terá uma página Web com um efeito rolagem parallax de CSS puro.
Aviso: este artigo usa propriedades de CSS experimentais que não funcionam em todos os navegadores. Este projeto foi testado e funciona no Chrome. Essa técnica não funciona bem no Firefox, Safari e iOS devido a algumas otimizações desses navegadores.
Passo 1 — Criando um novo projeto
Neste passo, use a linha de comando para criar uma nova pasta de projeto e arquivos. Para iniciar, abra seu terminal e crie uma nova pasta de projeto.
Digite o comando a seguir para criar a pasta do projeto:
- mkdir css-parallax
Neste caso, foi dado o nome css-parallax à pasta. Agora, entre na pasta css-parallax:
- cd css-parallax
Em seguida, crie um arquivo index.html em sua pasta css-parallax com o comando nano:
- nano index.html
Todo o HTML para o projeto será colocado neste arquivo.
No próximo passo, você irá iniciar a criação da estrutura da página.
Passo 2 — Configurando a estrutura do aplicativo
Neste passo, será adicionado o HTML necessário para criar a estrutura do projeto.
Dentro do seu arquivo index.html, adicione o seguinte código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Scrolling Parallax</title>
</head>
<body></body>
</html>
Esta é a estrutura básica da maioria das páginas que usam o HTML.
Adicione o código a seguir dentro da etiqueta <body>:
<body>
...
<main>
<section class="section parallax bg1">
<h1>Cute Kitten</h1>
</section>
<section class="section static">
<h1>Boring</h1>
</section>
<section class="section parallax bg2">
<h1>Fluffy Kitten</h1>
</section>
</main>
...
</body>
Esse código cria três seções diferentes. Duas terão uma imagem de fundo, e uma terá um fundo simples estático.
Nos próximos passos, os estilos para cada seção serão adicionados usando as classes que você adicionou no HTML.
Passo 3 — Criando um arquivo CSS e adicionando o CSS inicial
Neste passo, você irá criar um arquivo CSS. Em seguida, irá adicionar o CSS inicial necessário para estilizar o site e criar o efeito parallax.
Primeiro, crie um arquivo style.css em sua pasta css-parallax com o comando nano:
- nano styles.css
É aqui que você irá colocar todo o CSS necessário para criar o efeito de rolagem parallax.
Em seguida, comece pela classe .wrapper. Dentro do seu arquivo styles.css, adicione o seguinte código:
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
A classe .wrapper define a perspectiva e as propriedades de rolagem para toda a página.
A altura do wrapper precisa ser definida como um valor fixo para que o efeito funcione. Utilize a unidade de visor vh definida em 100 para obter a altura completa do visor da tela.
Ao escalar as imagens, elas irão adicionar uma barra de rolagem horizontal à tela. Desabilite isso adicionando overflow-x: hidden;. A propriedade perspective simula a distância do visor até os pseudoelementos que você irá criar e transformar mais adiante no CSS.
No próximo passo, você irá adicionar mais CSS para estilizar sua página.
Passo 4 — Adicionando estilos para a classe .section
Neste passo, você irá adicionar estilos à classe .section.
Dentro do seu arquivo styles.css, adicione o código a seguir abaixo da classe wrapper:
.wrapper {
height: 100vh;
overflow-x: hidden;
perspective: 2px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
A classe .section define as propriedades de tamanho, exibição e texto para as seções principais.
Defina uma posição de relative para que o filho, .parallax::after , possa estar absolutamente posicionado com relação ao elemento pai. section.
Cada seção possui uma view-height(vh) de 100 para utilizar a altura total do visor. Esse valor pode ser alterado e definido para qualquer altura que você preferir para cada seção.
Por fim, as propriedades de CSS restantes são usadas para formatar e adicionar estilização ao texto dentro de cada seção. Elas posicionam o texto no centro de cada seção e adicionam a cor white (branco).
Em seguida, você irá adicionar um pseudoelemento e estilizá-lo para criar o efeito parallax em duas das seções em seu HTML.
Passo 5 — Adicionando estilos para a classe .parallax
Neste passo, você irá adicionar estilos à classe .parallax.
Primeiro, você irá adicionar um pseudoelemento na classe .parallax a ser estilizado.
Nota: visite os documentos Web do MDN para aprender mais sobre os pseudoelementos do CSS.
Adicione o código a seguir abaixo da classe .section:
...
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
...
A classe parallax adiciona um pseudoelemento ::after à imagem de fundo e fornece as transformações necessárias para o efeito parallax.
O pseudoelemento é o último filho do elemento com a classe .parallax.
A primeira metade do código exibe e posiciona o pseudoelemento. A propriedade transform move o pseudoelemento para trás, longe da câmera, no z-index e então escala ele de volta para preencher o visor.
Como o pseudoelemento está mais longe, ele aparenta mover-se mais lentamente.
No próximo passo, você irá adicionar as imagens de fundo e o estilo de fundo estático.
Passo 6 — Adicionando imagens e imagem de fundo para cada seção
Neste passo, você irá adicionar as propriedades de CSS finais para adicionar as imagens de fundo e cor de fundo da seção estática.
Primeiro, adicione uma cor sólida de fundo à seção .static com o código a seguir, após a classe .parallax::after:
...
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.static {
background: red;
}
...
A classe .static adiciona uma imagem de fundo à seção estática que não possui uma imagem.
As duas seções com a classe .parallax também possuem uma classe extra diferente para cada uma. Use as classes .bg1 e .bg2 para adicionar as imagens de fundo de gatinhos.
Adicione o código a seguir abaixo da classe .static:
...
.static {
background: red;
}
.bg1::after {
background-image: url('https://placekitten.com/g/900/700');
}
.bg2::after {
background-image: url('https://placekitten.com/g/800/600');
}
...
As classes .bg1, .bg2 adicionam as respectivas imagens de fundo para cada seção.
As imagens são do site placekitten. É um serviço para obter fotos de gatinhos para usar como espaços reservados.
Agora que todo o código para o efeito de rolagem parallax foi adicionado, faça o link para seu arquivo styles.css em seu index.html.
Passo 7 — Fazendo o link do styles.css e abrindo o index.html em seu navegador
Neste passo, você irá criar o link do seu arquivo styles.css e abrir o projeto em seu navegador para ver o efeito de rolagem parallax.
Primeiro, adicione o código a seguir à etiqueta <head> no arquivo index.html:
[label css-parallax/index.html] ...
<head>
<meta charset="UTF-8" />
<^>
<link rel="stylesheet" href="styles.css" />
<^>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Parallax</title>
</head>
...
Agora, abra seu arquivo index.html em seu navegador:
Com isso, você configurou uma página Web funcional com um efeito de rolagem. Confira este repositório do GitHub para ver o código completo.
Conclusão
Neste artigo, você configurou um projeto com um arquivo index.html e um styles.css e agora possui uma página Web funcional. Você adicionou a estrutura de sua página Web e criou estilos para as várias seções do site.
É possível colocar as imagens que você usa ou o efeito parallax mais longe, para que elas se movam mais lentamente. Você terá que alterar a quantidade de pixels nas propriedades perspective e transform. Se não quiser que haja uma imagem de fundo a ser rolada, use background-attachment: fixed; em vez de perspective/translate/scale.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
author
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Featured on Community
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
