Parallax

In English you may see "

  

Parallax comes from Greek: παραλλαγή which means change. It is the change of the angular position of two stationary points relative to one another as seen by a moving observer. In a simple way, parallax is the apparent change of an object against a background due to the movement of the observer.

On a web page, the movement from the user's point of view is simulated by moving the mouse.

Any project that refers to Parallax is effectively building an object-shifting effect based on mouse movement.

jquery.parallax

This page is a good example of one of the first Parallax projects where you can get an explanation of how everything works and see some examples of usage.

Using a collection of elements, in the image above are li , where each is an effect layer to simulate the change of the viewpoint of the user obtained by moving the mouse.

Example usage:

Demonstration to work

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'll get something like this that can be seen in the demo link:

And moving the mouse down there is the referred change of viewpoint giving the idea that the user has lowered:

I know this JavaScript component called Panorama that produces the effect it describes, but scrolls the elements horizontally on the page.

This component allows you to define several layers that move at different speeds as if they were at different distances from the user's point of view, giving the sensation of panoramic view, hence the name.

Note that I can not find the site where this component is, but I am not the author of it.