<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'
					});

				}
			);

		}
	);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js