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.
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.
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.
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.
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:
E deslocando o rato para baixo existe a referida alteração do ponto de visão dando ideia que o utilizador de abaixou:
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.