O CSS moderno redefiniu o desenvolvimento web com suas funcionalidades poderosas e capacidades extraordinárias. CSS é uma ferramenta versátil que oferece opções de destaque para tornar as páginas web altamente interativas e atraentes. Seja pela flexibilidade no design, personalização rápida, excelentes opções de estilização ou pela Interface de Usuário (UI) avançada — o CSS traz soluções de ponta a ponta para todas as necessidades de desenvolvimento e estilização web. Acima de tudo, usar CSS e HTML, você pode adicionar animações e efeitos escrevendo apenas algumas linhas de código, o que de outra forma seria cansativo usando JavaScript.
Neste guia, vamos orientá-lo pelas etapas de criação de um efeito de rolagem parallax com CSS no Chrome.
Pré-requisitos
Para acompanhar este tutorial, você deve ter uma compreensão básica de HTML e CSS.
Passo 1: Criar um Novo Projeto
Vamos começar criando uma nova pasta de projeto e arquivos usando a interface de linha de comando. Abra seu terminal e digite o seguinte comando para criar uma nova pasta de projeto:
|
1 |
mkdir css-parallax |
Use o cd comando para alterar o diretório para a css-parallax pasta:
|
1 |
cd css-parallax |
Em seguida, crie um arquivo HTML na css-parallax pasta onde colocaremos todos os códigos HTML. Nomeie o arquivo index.html e abra-o usando o nano comando:
|
1 |
nano index.html |
Assim que tivermos nosso arquivo index.html pronto, vamos avançar e estruturar a página web adicionando os códigos HTML introdutórios.
Passo 2: Estrutura do HTML Básico
Nesta etapa, vamos projetar nossa página web adicionando os códigos HTML. Adicione as seguintes linhas de código no index.html arquivo:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Efeito de Rolagem Parallax com CSS</title> </head> <body></body> </html> |
Depois de configurar a estrutura básica de nossas páginas web, crie três classes de seção – duas para as imagens de fundo e uma para o fundo plano estático. Em seguida, adicione as seguintes linhas de código na <body> tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>Antes do Efeito de Rolagem Parallax</h1> </section> <section class="section static"> <h1>Bem-vindo à Rolagem Parallax</h1> </section> <section class="section parallax bg2"> <h1>Depois do Efeito de Rolagem Parallax</h1> </section> </main> ... </body> |
A inserção dos códigos HTML na <body> tag conclui a configuração básica do nosso html.arquivo. Nas próximas etapas, apresentaremos o CSS e definiremos as opções de estilização para cada um.
Passo 3: Introdução ao CSS
Vamos estilizar o site adicionando o arquivo CSS e criando o efeito parallax. Primeiro, crie um arquivo CSS na pasta css-parallax pasta onde colocaremos todos os códigos CSS necessários para criar o efeito de rolagem parallax. Depois disso, insira um styles.css arquivo na sua css-parallax pasta usando o comando nano :
|
1 |
nano styles.css |
Vamos estilizar nossa página web começando com a classe .wrapper . A classe .wrapper define as propriedades de perspectiva e rolagem para toda a página. Comece com a classe wrapper e especifique sua altura, overflow e perspectiva. Defina a altura do wrapper para um valor constante para que o efeito de rolagem parallax funcione. Neste guia, definimos o valor do viewport usando 100vh para obter a altura total do viewport da tela. Você pode modificar o valor vh com base nas necessidades do seu projeto. Em seguida, desative a barra de rolagem horizontal da tela definindo a propriedade overflow-x como hidden. Além disso, especifique o valor da propriedade perspective como 3px. Vamos adicionar as seguintes linhas de código no arquivo styles.css :
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
Passo 4: Adicionar estilo para a classe .section
Ao lado da classe wrapper, adicione estilos à classe .section . A classe .section define as propriedades de tamanho, exibição e texto para as seções principais. Defina a posição como relative para alinhar um posicionamento relativo do elemento filho .parallax::after e do elemento pai .section. Mantenha a view-height(vh) como 100 para obter a altura total do viewport da tela. Adicione, modifique e estilize os outros parâmetros de acordo com suas necessidades.
Dentro do seu arquivo styles.css adicione o seguinte código ao lado da classe wrapper:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; color: red; text-shadow: 0 0 5px #000; } |
Em seguida, adicionaremos um pseudo-elemento e o estilizaremos para criar o efeito parallax e colocá-lo em ação.
Passo 5: Adicionar estilos para a classe .parallax
Nesta etapa, adicionaremos um pseudo-elemento no .parallax. Este pseudo-elemento será o último filho do elemento e adicionará um pseudo-elemento ::after à imagem de fundo responsável por iniciar o efeito parallax. Na primeira metade do código, a especificação básica de exibição e o posicionamento do pseudo-elemento são configurados. Na metade seguinte, adicionaremos a propriedade transform usando a função CSS translateZ() e a manteremos como (-1px). Além disso, adicione um z-index para controlar o empilhamento vertical.
Adicione o seguinte código abaixo da classe .section :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .section { position: relative; height: 100vh; transform-style: preserve-3d; 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; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
Passo 6: Adicionar imagens e fundo para cada seção
Vamos adicionar as propriedades CSS finais nas imagens de fundo e na cor de fundo da seção estática. Comece adicionando uma cor de fundo sólida à seção .static . Defina a cor de fundo como aqua e adicione o seguinte código após a classe .parallax::after :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
A classe .static adiciona um fundo à seção estática que não possui uma imagem. As outras duas seções com a .parallax possuem classes exclusivas destinadas a conter imagens de fundo. Adicione as URLs das imagens de fundo nas classes .bg1 e .bg2 respectivamente.
Neste tutorial, estamos usando imagens aleatórias do Unsplash. Você também pode usar imagens de outros sites como Pixapay, Placekitten, e Pexels, para citar alguns, e personalizá-las como desejar. Adicione o seguinte código à classe .static :
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
Passo 7: Conectar o CSS ao HTML
Agora que adicionamos todo o código para o efeito de rolagem parallax, vamos vincular o arquivo styles.css com o arquivo index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Efeito de Rolagem Parallax com CSS</title> </head> ... |
Abra o index.html que criamos no Passo 2 e no navegador Chrome:
Conclusão
Neste tutorial, passamos pelas etapas de configuração de uma página web funcional usando uma estrutura básica. Há muitas outras opções interessantes e opções de personalização com as quais você pode experimentar. Você pode tentar adicionar efeitos de sombra, modificar a rolagem da imagem e outros ajustes para tornar seu aprendizado divertido e emocionante.
Para se aprofundar ainda mais nos tópicos de desenvolvimento web, confira estes recursos do nosso blog:
- Um Guia sobre Como Adicionar JavaScript ao HTML
- Trabalhando com JavaScript: O que são Objetos
- O que é jQuery e Como Você Pode Usá-lo
Feliz computação!
Comentários
Nenhum comentário ainda. Seja o primeiro.