3

Como encontro um efeito do tipo "parallax mousemove"

Gostaria de saber o nome desse efeito e se tem algum exemplo na internet.

Eu sabia fazer esse efeito em ActionScript 3.0 se chamava Scrollrect, mas não sei o nome correto em jQuery.

6
  • No próprio link que você já, clicando no "i", tem um link para o github do projeto, lá você pode consultar o código-fonte. Esse tipo de efeito se chama "parallax" mesmo.
    – bfavaretto
    Commented 30/01/2014 às 16:13
  • obrigado pela dica mas ja tentei com esse código que eles deixaram, mas não consegui fazer o que eu queria, que é deixar o background com efeito mouse move , vc não sabe algum outro exemplo semelhante na internet não, agradeço desde já...
    – user3583
    Commented 30/01/2014 às 16:32
  • Faça uma busca por jquery parallax, tem vários. Não saberia recomendar um pois nunca usei nenhum.
    – bfavaretto
    Commented 30/01/2014 às 16:39
  • Você pode tentar usar esse plugin do jQuery. O site possui algumas instruções, lista de sites com demonstrações e sites comerciais que utilizam jparallax. Commented 30/01/2014 às 16:40
  • Provavelmente o que você procura esta nesse site
    – dann
    Commented 30/01/2014 às 16:57

2 Respostas 2

6

Parallax

Em Português pode aparecer escrito "Paralaxe".

Paralaxe vem do Grego: παραλλαγή que significa alteração. É a alteração da posição angular de dois pontos estacionários relativos um ao outro como vistos por um observador em movimento. De forma simples, paralaxe é a alteração aparente de um objeto contra um fundo devido ao movimento do observador.

Numa página de internet, a deslocação do ponto de vista do utilizador é simulada através da movimentação do rato.

Qualquer projecto que se refira a Parallax está efectivamente a construir um efeito de deslocação de objectos com base na movimentação do rato.

jquery.parallax

Imagem ilustrativa

Esta página é um bom exemplo de um dos primeiros projectos de Parallax onde podes obter uma explicação de como tudo funciona e observar alguns exemplos de utilização.

Fazendo uso de uma colecção de elementos, na imagem em cima são li, onde cada uma é camada de efeito para simular a alteração do ponto de visão do utilizador obtido através da deslocação do rato.

Exemplo de utilização:

Demonstração a funcionar

Assumindo que as camadas estão construídas da seguinte forma:

HTML

<div id="port">
 <!-- 7 Camadas de imagens, cada camada ligeiramente maior que a que se encontra por trás -->
 <img class="parallax-layer" src="../images/parallax_drops/0.png" alt=""/>
 <img class="parallax-layer" src="../images/parallax_drops/1.png" alt=""/>
 <img class="parallax-layer" src="../images/parallax_drops/2.png" alt=""/>
 <img class="parallax-layer" src="../images/parallax_drops/3.png" alt=""/>
 <img class="parallax-layer" src="../images/parallax_drops/4.png" alt=""/>
 <img class="parallax-layer" src="../images/parallax_drops/5.png" alt=""/>
 <img class="parallax-layer" src="../images/parallax_drops/6.png" alt=""/>
</div>

jQuery

jQuery(document).ready(function(){

  // Declarar o efeito nas camadas
  jQuery('.parallax-layer').parallax({
    mouseport: jQuery("#port")          // indicar o elemento que envolve o efeito
  });
});

Irias obter algo deste género que pode ser visto no link para a demonstração:

Captura de Tela

E deslocando o rato para baixo existe a referida alteração do ponto de visão dando ideia que o utilizador de abaixou:

Captura de Tela

0

Eu conheço este componente de JavaScript chamado Panorama que produz o efeito que descreve, mas faz a rolagem dos elementos na página na horizontal.

Este componente permite definir diversas camadas que se movem a velocidades diferentes como se estivessem a distâncias diferentes do ponto de vista do usuário, dando a sensação de vista panorâmica, e daí o nome.

Note, eu modero o site onde está esse componente, mas não sou o autor do mesmo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .