I'd like to know how I make this effect that on this site or otherse .
When I move the mouse over the image it moves.
An important detail is that it does not matter where I mouse-over, the image always has to move the second link this is very clear.
jQuery(document).ready(function($) {
$('#Parallax').mousemove(
function(e) {
/* Work out mouse position */
var offset = $(this).offset();
var xPos = e.pageX - offset.left;
var yPos = e.pageY - offset.top;
/* Get percentage positions */
var mouseXPercent = Math.round(xPos / $(this).width() * 100);
var mouseYPercent = Math.round(yPos / $(this).height() * 100);
/* Position Each Layer */
$(this).children('img').each(
function() {
var diffX = $('#Parallax').width() - $(this).width();
var diffY = $('#Parallax').height() - $(this).height();
var myX = diffX * (mouseXPercent / 100); //) / 100) / 2;
var myY = diffY * (mouseYPercent / 100);
var cssObj = {
'left': myX + 'px',
'top': myY + 'px'
}
//$(this).css(cssObj);
$(this).animate({
left: myX,
top: myY
}, {
duration: 50,
queue: false,
easing: 'linear'
});
}
);
}
);
});body {
background-color: #3D7991;
font-family: Verdana, sans-serif;
font-size: small;
line-height: normal;
}
.Clear {
clear: both;
height: 0;
overflow: hidden;
}
h1 {
margin-bottom: 0.5em;
}
p {
margin-bottom: 0.5em;
line-height: 1.6em;
}
a {
color: #3D7991;
}
.Return {
font-size: 1.2em;
margin-top: 2em;
text-align: center;
}
#Dev {
position: absolute;
}
#OuterBox {
background-color: #FAFAF2;
margin: 25px auto auto auto;
padding: 25px;
position: relative;
width: 750px;
-moz-box-shadow: 5px 5px 15px #2A5364;
box-shadow: 5px 5px 15px #2A5364;
-moz-border-radius: 10px;
border-radius: 10px;
}
#Parallax {
background-color: #880088;
height: 500px;
margin: auto;
margin-top: 2em;
overflow: hidden;
position: relative;
width: 750px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#Parallax img {
position: absolute;
top: 0;
left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="Parallax">
<img src="http://publicdomainvectors.org/photos/cloud_jon_phillips_01.png"/><imgsrc="http://4.bp.blogspot.com/-pOjvZCG09C4/Uyo8SszT0iI/AAAAAAAAPBY/7HtQrWmHyYg/s1600/molde-nuvem-desenho.png" />
<img src="http://2.bp.blogspot.com/-g11nccDlhlY/U_u4DBMTv9I/AAAAAAAARX8/tjurGjgli4I/s1600/Cute%2B-%2Bnuvem%2B-%2BCria%C3%A7%C3%A3o%2BBlog%2BPNG-Free.png" />
</div>
