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.
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:
And by scrolling the mouse down there is this change in the point of view that gives the idea that the user has lowered:
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