3
How do I find a type effect "Parallax Mousemove"
I would like to know the name of this effect and if you have any examples on the Internet.
I knew how to do that effect on Actionscript 3.0 was called Scrollrect, but I don’t know the right name in jQuery.
6
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.
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:
0
I know this Javascript component called Panorama which produces the effect it describes, but scrolls the elements on the page horizontally.
This component allows to define several layers that move at different speeds as if they were at different distances from the point of view of the user, giving the feeling of panoramic view, and hence the name.
Note, I moderate the site where this component is, but I am not the author of it.
Browser other questions tagged javascript jquery
You are not signed in. Login or sign up in order to post.
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