<div id="parallax">
<img src="http://www.shinyface.com/projects/parallax/images/Bottom.png">
<img src="http://www.shinyface.com/projects/parallax/images/Middle.png" />
<img src="http://www.shinyface.com/projects/parallax/images/Top.png" />
</div>
#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;
}
$('#parallax').mousemove(
function(e){
/* Detecta a posição do mouse */
var offset = $(this).offset();
var xPos = e.pageX - offset.left;
var yPos = e.pageY - offset.top;
/* Pega a posição em porcentagem */
var mouseXPercent = Math.round(xPos / $(this).width() * 100);
var mouseYPercent = Math.round(yPos / $(this).height() * 100);
/* Posiciona cada camada */
$(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'
});
}
);
}
);
This Pen doesn't use any external CSS resources.