Como criar um efeito de paralaxe em camadas no seu site

Sep 16, 2025

Como

(Crédito de imagem: www.backgrylls.com)

O movimento do paralaxe, o conceito de camadas em movimento em diferentes velocidades, tem sido usado por anos de animação. O site oficial de Bear Grylls (um dos nossos favoritos Sites de rolagem de paralaxe. ), leva o efeito em instruções novas e interessantes. As montanhas de fundo escalam para baixo na posição, enquanto se desvanecem para que eles se tornem totalmente opacos, e no fundo da página, o texto 'aventura' se eleva para trás as montanhas enquanto ele desaparece.

Para efeitos de movimento mais inspiradores, confira nosso guia para o melhor Animações CSS e como codificá-las .

O design do site Bear Grylls é o trabalho da Agência de Marketing Creative do Reino Unido Posto avançado e com um público-alvo variando de 16 a 55 anos de idade, e mais de 7 milhões de seguidores em todo o mundo, eles tinham uma tarefa séria em suas mãos.

"A principal característica do site foi a página inicial; Queríamos que os visitantes literalmente pulassem na tela e se juntassem ao urso em suas aventuras", explique o co-fundador Chris Wilcock e o diretor criativo Dan Williams. "Para conseguir isso, utilizamos algumas transições inteligentes, juntamente com vídeos editados, imagens dramáticas e linguagem geral no site".

Veja o site em ação em www.backgryllls.com. . Neste artigo, vamos explicar como recriar o efeito em seus próprios sites. Começar por Baixando os arquivos tutoriais .

01. Crie o efeito de escala

A estrutura para permitir que todo o conteúdo animador funcione é relativamente simples. Um wrapper segura tudo e esconde qualquer conteúdo de estouro. Em seguida, há essencialmente três camadas de tags div em cima.

 & lt; div classe = "wrapper" & gt;
& lt; div classe = "pos texto" & gt; & lt; / div & gt;
& lt; div classe = "pos mountain1" & gt; & lt; / div & gt;
& lt; div classe = "pos mountain2" & gt; & lt; / div & gt;
& lt; / div & gt;

02. Inicie o CSS

Para tornar o design, a imagem do gradiente de fundo será adicionada ao corpo e definirá para preencher o tamanho da tela. O wrapper detém todas as camadas, e o estouro para conteúdo está oculto para que os efeitos de escala possam ser aplicados.

 corpo {
Margem: 0;
preenchimento: 0;
Altura: 100%;
Antecedentes: URL (IMG / BG.JPG)
centro central;
Fundo de tamanho: capa;
}
.embrulho {
Largura: 100VW;
Altura: 100vh;
Posição: Relativo;
estouro: oculto;
}

03. Posicione cada camada

O próximo código garante que cada camada seja posicionada absolutamente, uma sobre a outra, dentro do wrapper. O tamanho desse preenche a largura da viewport e a altura para que as imagens preencham a tela.

 .POS {
Posição: Absoluto;
top: 0;
Esquerda: 0;
Largura: 100VW;
Altura: 100vh;
}

04. Adicione o texto

A classe de texto realmente apenas adiciona a imagem certa e define sua posição inicial antes de animá-lo no lugar usando o subir quadros-chave que serão adicionados na etapa final.

 .Texto {
Fundo: URL (IMG / Text.png)
centro central;
Fundo de tamanho: capa;
Transformar: translate3d (0, 30px, 0);
opacidade: 0;
Animação: movimp 1.8s facilidade;
Modo de aleta de animação: para a frente;
}

05. Animate a primeira montanha

A primeira montanha é a mais longe da tela, e isso terá uma pequena escala que será animada. A opacidade de todas as camadas também é definida para que elas apareçam no lugar.

 .Mountain1 {
Fundo: URL (IMG / Mountain1.png)
centro central;
Fundo de tamanho: capa;
Transformar: Scale3D (1,1, 1,1, 1.1);
opacidade: 0,2;
Animação: Scaler 1s facilita-se;
Modo de aleta de animação: para a frente;
}

06. Animar a montanha de primeiro plano

A montanha para o primeiro plano é quase idêntica à outra montanha - apenas faz muito mais uma escala no lugar. Ambas as montanhas compartilham os quadros quadros "escalados" para sua animação.

 .Mountain2 {
Fundo: URL (IMG / Mountain2.png)
centro central;
Fundo de tamanho: capa;
Transformar: Scale3D (1,3, 1,3, 1.3);
opacidade: 0.1;
Animação: Scaler 1.2s facilita-se;
Modo de aleta de animação: para a frente;
}

07. Adicionar animação de keyframe

Os keyframes agora são criados que especifica isso. No estado final do movimento, este estado final será mantido no lugar. O texto é subido e as montanhas são dimensionadas para baixo, para se encaixar no design.

 @KeyFrames movimp {
100% {
Transformar: translate3d (0, 0, 0);
opacidade: 1;
}
}

@KeyFrames Scaler {
100% {
Transformar: Scale3D (1, 1, 1);
opacidade: 1;
}
}

generate CSS — Pegue um ingresso para gerar CSS agora por um grande desconto (Crédito da imagem: futuro)

Este artigo foi originalmente publicado em questão 289 Web designer - à venda agora . Inscreva-se aqui .

Consulte Mais informação:

Como adicionar animação ao SVG com CSS
Dos e Don'ts para animações web deliciosas
Como projetar com formas CSS: uma introdução

Como criar um efeito de paralaxe em camadas no seu site

01. Crie o efeito de escala

02. Inicie o CSS

03. Posicione cada camada

04. Adicione o texto

05. Animate a primeira montanha

06. Animar a montanha de primeiro plano

07. Adicionar animação de keyframe

Como - Artigos mais populares

21 maneiras de melhorar a produtividade com NPM

Como esculpir um nariz humano em Zbrush: 4 etapas fáceis

Leve seu seu VR Art

Gere paletas de cores sem fim com Khroma

Aprenda a cultivar folhagem com x-partículas

Como desenvolver criaturas míticas

11 dicas para criar uma paisagem aquosa em 3D

Crie tintas mistas com InDesign

Categorias