O efeito parallax dá a sensação de profundidade e movimento numa página web:
o fundo desloca-se mais lentamente do que o conteúdo à frente, criando um aspeto moderno e dinâmico.
Este efeito é muito usado em sites atuais para destacar imagens grandes, títulos ou secções de destaque.
Estrutura básica
Vamos criar uma página simples com três secções:
Cabeçalho;
Duas áreas com imagem e efeito parallax;
Texto entre as imagens.
Explicação
background-attachment: fixed;→ é a propriedade que cria o efeito parallax, fixando a imagem de fundo enquanto o resto da página se move.background-size: cover;→ garante que a imagem cobre toda a área da secção.height: 100vh;→ faz com que cada secção tenha a altura total do ecrã.
Dicas
- Usa imagens grandes (largura ≥ 1920px) para melhor qualidade.
- Escolhe imagens leves e otimizadas (para não atrasar o carregamento).
- Podes variar o efeito alterando o tipo de imagem, o tamanho ou a altura das secções.
- Evita usar o parallax em excesso — deve servir para destacar, não distrair.
Exercício Final
Cria uma página chamada parallax.html que:
Tenha um cabeçalho com o título do trabalho.
Inclua pelo menos duas secções com imagens de fundo e o efeito parallax.
Intercale as imagens com blocos de texto explicativo.
Termine com um rodapé simples.
