Criar um efeito de fundo paralaxe controlado por mouse

Sep 16, 2025

Como

(Crédito da imagem: Renaud Rohlinger)

Sites com rolagem paralaxe Continue sendo popular por um motivo: eles criam uma experiência de navegação agradável e envolvente para o usuário. Nós já olhamos para o melhor deslumbrante rolagem de paralaxe. Websites para inspirar você, mas o que você faz se quiser fazer um dos seus?

Felizmente, Francês Desenvolvedor Criativo Renaud Rohlinger está aqui para mostrar as cordas para criar um plano de fundo de rolagem de paralaxe que você pode controlar com o mouse. Confira os resultados incríveis em seu site e, em seguida, aprenda com o próprio Rohlinger abaixo em como você pode replicar o efeito no seu próximo projeto.

Você também pode tentar um desses construtores de site e enquanto você está considerando o desempenho do seu site, verifique sua hospedagem na web. O serviço está funcionando para você. Tem um site pesado da mídia? Backup de confiança armazenamento na núvem .

01. Defina a estrutura de documentos HTML

O primeiro passo é definir a estrutura do documento HTML. Isso consiste no contêiner HTML que descreve o documento como tendo seções para cabeça e corpo. Enquanto a seção principal liga os arquivos JavaScript e CSS externos, a seção do corpo é usada para definir os elementos de conteúdo da página na etapa 2.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; paralax background & lt; / title & gt;
& lt; link rel = "stylesheet" tipo = "texto / css"
href = "Styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; corpo e gt;
   *** Etapa 2 aqui
& lt; / corpo & gt;
& lt; / html & gt;

02. Identifique o conteúdo HTML

O conteúdo do corpo consiste em texto de exibição e um recipiente div usando Data-paralaxe. atributo. É este elemento de contêiner que será usado para o fundo do paralax, com cada um de seus elementos filho a ser estilizado com as imagens de fundo necessárias. Neste exemplo, o contêiner tem três camadas de imagem a serem criadas a partir dos elementos da criança div.

 & lt; h1 & gt; olá! & Lt; / h1 & gt;
& lt; div data-paralaxe & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
& lt; / div & gt;

03. Criar um recipiente de paralaxe CSS

Crie um novo arquivo chamado Styles.css. . O primeiro passo neste arquivo define a cor de conteúdo padrão a ser branca e as configurações do recipiente de fundo do paralax. O posicionamento fixo é aplicado ao recipiente do paralaxe para permitir que permaneça na mesma posição que o conteúdo rola sobre ele. Uma cor padrão é aplicada como a cor da página, enquanto um índice z negativo permite que o contêiner apareça no conteúdo da página.

 HTML, corpo {
   cor: #fff;
}
[Data-paralax] {
   Posição: fixo;
   Largura: 100VW;
   Altura: 100vh;
   top: 0;
   Esquerda: 0;
   Z-index: -1;
   fundo-cor: # 000;
}

04. Configurar camadas de paralaxas CSS

Cada uma das camadas de imagem é definida para usar o posicionamento absoluto com um tamanho para corresponder à janela do navegador. A imagem do paralaxe neste exemplo será baseada em um padrão de tamanho específico definido para repetir. Você pode optar por repetir apenas a imagem usando a repetição-y ou horizontalmente usando repetição-x.

 [data-paralax] & gt; * {
   Posição: Absoluto;
   Largura: 100VW;
   Altura: 100vh;
   Fundo-Repetir: Repita;
   plano de fundo: 20vw 20vw;
}

05. Use camadas de fundo CSS

Embora cada uma das camadas de imagem compartilhasse as configurações de posição e tamanho definidas na etapa 4, cada camada usa uma imagem exclusiva. O Seletor de NTH-filho é usado para referenciar cada elemento individual dentro do recipiente de paralaxe. O atributo de image-imagem é usado para desenhar duas linhas que cria um efeito de grade quando telhadas. Camadas inferiores usam cores mais escuras para ajudar a fornecer uma percepção de profundidade.

 [data-paralax] & gt; *: nth-criança (1) {
   imagem de fundo:
      gradiente linear (para a direita, # 333 1px,
  1px transparente),
      gradiente linear (para baixo, # 333 1px,
  1px transparente);
}
[Data-paralax] & gt; *: nth-criança (2) {
   imagem de fundo:
      gradiente linear (para a direita, # 777 1px,
1px transparente),
      gradiente linear (para baixo, # 777 1px,
1px transparente);
}
[Data-paralax] & gt; *: nth-criança (3) {
   imagem de fundo
      gradiente linear (para a direita, #fff,
1px transparente),
      gradiente linear (para baixo, #fff 1px,
 1px transparente);
}

06. Realizar iniciação da camada de JavaScript

Crie um novo arquivo chamado code.js. . Esta etapa encontra o contêiner de paralaxe e inicia cada uma de suas camadas de imagem com o Índice de Dados Atributo que será usado na etapa 7. Isso deve ser executado a partir de uma função conectada ao evento de carregamento da janela do navegador, para que o código seja executado apenas quando o conteúdo do corpo da página estiver pronto.

 janela.addeventlistener ("carregar", função () {
   Var contêiner = documento.
queryselector ("[data-paralax]");
   var childnodes = recipiente.
   para (var n = 0; n & lt; childnodes.length; n ++) {
      ChildNodes [n] .Settribute ("índice de dados", n + 1);
   }
   **** PASSO 7 AQUI
});

07. Calcular o movimento do mouse de JavaScript

O efeito depende de mover as imagens associadas a cada camada de paralaxe em resposta ao movimento do mouse. O recipiente de paralaxe identificado na etapa 6 tem um MouseMove O ouvinte de eventos anexado, que desencadeia uma função para reposicionar imagens de fundo das camadas de paralaxas sempre que houver movimento do mouse. Cada camada tem um cálculo de movimento com base no número de índice aplicado na etapa 6.

 Container.addeventListener ("MouseMove",
 função (e) {
   var elms = este.Children;
   para (var c = 0; c & lt; elms.length; C ++) {
      var movimento = parseint (Elms [C].
GetAttribute ("Data-Index")) / 10;
      var x = ((e.clientx) * movimento) + "px";
      var y = ((e.clienty) * movimento) + "px"; Elms [c] .Style.BackgroundPosition = X +
"" + y;
   }
});

Este artigo foi originalmente publicado na revista Creative Web Design Web designer . Compre o problema 290 agora.

Artigos relacionados:

10 melhores estruturas CSS em 2019
Como adicionar animação ao SVG com CSS
52 ferramentas de design web para ajudá-lo a trabalhar mais inteligentes em 2019

Criar um efeito de fundo paralaxe controlado por mouse

01. Defina a estrutura de documentos HTML

02. Identifique o conteúdo HTML

03. Criar um recipiente de paralaxe CSS

04. Configurar camadas de paralaxas CSS

05. Use camadas de fundo CSS

06. Realizar iniciação da camada de JavaScript

07. Calcular o movimento do mouse de JavaScript

Como - Artigos mais populares

Use o Adobe XD para criar micro interações

Criar um humano digital realista

Como capturar a luz com óleos

Como projetar interfaces móveis amigáveis

Como criar o cabelo no cinema 4D

Crie ilustrações simples para a web

Como tornar o seu site WordPress multilíngue

Começar com prototipagem no Adobe XD

Categorias