Criar uma imagem de paralaxe interativa

Sep 16, 2025

Como

Rolagem de paralaxe. não é mais o grabber garantido de atenção que costumava ser, mas há outras maneiras de usar técnicas de paralaxe para envolver seus visitantes e melhorar o seu experiência de usuário .

Dar uma olhada em Site do Sr. Fisk , projetado por BMO. e você notará uma espécie de paralax diferente: Sua imagem principal de cor clara se move em 3D, em resposta aos movimentos do mouse.

5 dicas para CSS super rápidos

É um efeito impressionante que não é muito difícil de implementar; Basta seguir estas etapas para dar ao seu site uma sensação de profundidade atraente.

Crie seu próprio site atraente com o perfeito hospedagem na web. serviço e Construtor de sites ferramenta. E, ao longo do caminho, salve seus arquivos de design no melhor armazenamento na núvem .

01. Inicie HTML.

O primeiro passo é definir o documento HTML, que consiste no contêiner HTML para armazenar as seções da cabeça e do corpo. Enquanto a seção principal é responsável principalmente por carregar os recursos CSS e JavaScript externos, a seção do corpo armazenará os elementos de conteúdo a serem criados na etapa 02.

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; rolo de mouse & 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. Elementos de conteúdo

A técnica permitirá qualquer contêiner de conteúdo usando o atributo Data-Parallax para exibir o efeito. Cada elemento filho de primeiro nível será exibido com a apresentação do paralax. Este exemplo define três camadas de criança para o paralaxe, mas você pode adicionar mais se quiser. Você também pode adicionar conteúdo a essas camadas, como texto ou imagens; O PNG ou o SVG com transparência funcionarão melhor.

 & lt; artigo Data-Paralax & GT;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
  & lt; div & gt; & lt; / div & gt;
& lt; / Artigo & GT;

03. Estilo de contêiner de paralaxe

Crie um novo arquivo chamado 'Styles.css'. O primeiro conjunto de regras neste arquivo define o tamanho padrão do contêiner do paralaxe e seu modo de posição. É importante usar o posicionamento relativo para que os elementos filhos possam ser colocados em relação a onde o contêiner estiver localizado. A largura e a altura são definidas para cobrir a tela cheia para permitir a máxima interatividade.

 [Data-Parallax] {
  Posição: Relativo;
  Largura: 100VW;
  Altura: 100vh;
}

04. Children de Paralaxe.

Cada um dos primeiros elementos de nível dentro do contêiner Data-Parallax é dimensionado e posicionado para aparecer centralmente. Juntamente com o posicionamento relativo dos pais, a porcentagem é usada como unidade de medição, permitindo o dimensionamento e o posicionamento ser colocado em relação ao contêiner de paralaxe. Para este exemplo, um fundo vermelho transparente é usado para demonstrar o efeito - você pode substituir isso por imagem PNG ou SVG de sua escolha usando @background: URL ("sua imagem aqui").

 [Data-Paralax] & gt; * {
  Posição: Absoluto;
  Largura: 50%;
  Altura: 50%;
  Esquerda: 25%;
  Top: 25%;
  Fronteira: 1px sólido # 000;
  Fundo: RGBA (255,0,0, 0,25)
}

05. Inicie o Javascript

Crie um novo arquivo chamado 'code.js'. O JavaScript será usado para controlar as respostas às interações do mouse do usuário. Não queremos que o JavaScript executei qualquer código JavaScript até que a página seja carregada totalmente, portanto, o código para as etapas 06 e 07 colocando uma função acionada pelo evento Load, que ativa quando a janela concluiu o carregamento.

 janela.addeventlistener ("Carregar", Função () {
  *** PASSO 6 AQUI
});

06. Nó Search.

A primeira atividade do JavaScript para executar imediatamente após a página estiver pronta é encontrar todas as camadas de paralaxas. Em primeiro lugar, os recipientes do paralaxe são encontrados, seguidos por seus filhos. Cada criança tem um número de índice aplicada sob o atributo 'Data-Index'.

 AR nós = document.queryselectorall ("[data-paralax]");
para (var i = 0; i & lt; nós.length; i ++) {
  var crianças = nós [i] .Children;
  para (var n = 0; n & lt.length.length; n ++) {
  crianças [n] .Settribute ("índice de dados", n + 2);
  }
  *** PASSO 7 AQUI
}

07. Os ouvintes do paralaxe.

A etapa final é aplicar um ouvinte de eventos para qualquer movimento do mouse ocorrendo sobre o contêiner de paralaxe. Qualquer ação desses acionadores para calcular as novas posições das camadas do paralaxe com base na posição do mouse e no atributo de índice de dados definido na etapa 06 - resultando em cada atualização de camada em diferentes passos. O resultado de cada cálculo é aplicado às camadas através do atributo de estilo.

 nós [i] .addeventlistener ("mouseMove", função (e) {
  var elms = este.Children;
  para (var c = 0; c & lt; elms.length; C ++) {
  var divisor = parseint (ELMS [C] .GetAttribute ("Data-Index"));
  var startx = this.offsetwidth / 4;
  var starty = isso.foffeeight / 8;
  Elms [c] .style.left = startx - (((e.screenx / divisor) -E.clientx) / 3) + "px";
  elms [c] .style.top = starty - (((e.screeny / divisor) -e.clienty) / 3) + "px";
  }
});

Este artigo foi originalmente publicado em questão 272 da revista Creative Web Design Web designer . Comprar edição 272 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

Animar svg com javascript
Criar efeitos líquidos com webgl
10 maneiras de evitar problemas de compatibilidade entre navegadores

Criar uma imagem de paralaxe interativa

01. Inicie HTML.

02. Elementos de conteúdo

03. Estilo de contêiner de paralaxe

04. Children de Paralaxe.

05. Inicie o Javascript

06. Nó Search.

07. Os ouvintes do paralaxe.

Como - Artigos mais populares

Como desenhar uma pessoa

10 coisas que você não sabia que poderia fazer com o Photoshop

Como construir layouts complexos usando CSS

Protótipos perfeitos e desenhos de mão com Marvel

Criar arte retrato no pintor corel

Criar movimento dinâmico em uma composição

Como capturar a luz com óleos

Mestre pintura negativa em aquarela

Categorias