In Portuguese it can be written "Parallax".
Parallax comes from the Greek: παραλλαγή meaning change. It is the change of the angular position of two stationary points relative to each other as seen by a moving observer. Simply put, parallax is the apparent alteration of an object against a background due to the movement of the observer.
On a website, scrolling from the user’s point of view is simulated by moving the mouse.
Any project relating to Parallax is actually building an object shift effect based on mouse movement.
![Imagem ilustrativa Imagem ilustrativa](https://i.stack.imgur.com/hTrYG.png)
This page is a good example of one of the first Parallax where you can get an explanation of how everything works and see some examples of use.
Making use of a collection of elements, in the image above are li
, where each is an effect layer to simulate the change of the user’s point of view obtained by moving the mouse.
Example of use:
Working demonstration
Assuming the layers are built as follows:
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
});
});
You would get something like this that can be seen in the link to the demo:
![Captura de Tela Captura de Tela](https://i.stack.imgur.com/EyNct.png)
And by scrolling the mouse down there is this change in the point of view that gives the idea that the user has lowered:
![Captura de Tela Captura de Tela](https://i.stack.imgur.com/nNYyY.png)
In the link itself you already, clicking on the "i", has a link to the project github, there you can consult the source code. This type of effect is called "Parallax".
– bfavaretto
thanks for the tip but I’ve tried with this code they left, but I couldn’t do what I wanted, which is to let the background move with mouse effect , you don’t know any other similar example on the internet no, I thank you from now...
– user3583
Do a search for jquery Parallax, has several. I wouldn’t know to recommend one because I’ve never used any.
– bfavaretto
You can try using this jQuery plugin. The site has some instructions, list of websites with demonstrations and commercial websites that use jparallax.
– Paulo Gonçalo
Probably what you seek this on that website
– dann
This one is much better. Works perfectly on iPhone and iPad. Makes the <i>Parallax</i> tilting the device.
– user3760