felquis/parallax.html

## parallax.html
<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">
	<title>Mouse Parallax Effect</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<div id="parallax">
        <img class="parallax-item" src="http://bymarina.com.br/wp-content/uploads/2011/01/sol2.jpg" width="150">
        <img class="parallax-item" src="http://mercuriovenus.no.sapo.pt/menu/mercurio/Mercurio.gif" width="150">
        <img class="parallax-item" src="http://starchild.gsfc.nasa.gov/Images/StarChild/solar_system_level1/venus.gif" width="150">
        <img class="parallax-item" src="http://www.anjodeluz.net/Mashubi%20Rochell/earth.gif" width="150">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="parallax.js"></script>
</body>
</html>

## parallax.js
/*
*
* Simple Parallax, 01/03/2012
*
* Contributors
* @felquis, @cironunesdev
* DEMO: http://jsfiddle.net/6qhVN/
*/

!(function( $, window, document ) {
    var $doc = $(document),
            body = document.body,
            val = 0.2,
            limit = 1;

    $(function(){

      $doc.on('mousemove', function( e ){

            var //first proprities to calculate the parallax
            xMouse = e.pageX,
            yMouse = e.pageY,
            xCenter = body.clientWidth / 2,
            yCenter = body.clientHeight / 2,
            offsetLeft = xMouse - xCenter,
            offsetTop = yMouse - yCenter,
            i,

            //then caching dom elem and your lenght
            $elem = $('.parallax-item');

            $elem.each(function( i ) {
                $(this).css({
                    left: offsetLeft * val,
                    top: offsetTop * val
                });

                console.log(val);

                val += 0.2;

                if( val === limit ) {
                    val = 0.2;
                }
            });

        });

    });
}( jQuery, window, document ))

## style.css
#parallax{
    position:relative;
    width:500px;
    height:500px;
    margin:5% auto;
    overflow:hidden;
    border:1px solid;
}
#parallax img{
    position:relative;
    margin:0 auto;
    display:block;
}
	<!DOCTYPE HTML>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8">
	<title>Mouse Parallax Effect</title>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<div id="parallax">
	<img class="parallax-item" src="http://bymarina.com.br/wp-content/uploads/2011/01/sol2.jpg" width="150">
	<img class="parallax-item" src="http://mercuriovenus.no.sapo.pt/menu/mercurio/Mercurio.gif" width="150">
	<img class="parallax-item" src="http://starchild.gsfc.nasa.gov/Images/StarChild/solar_system_level1/venus.gif" width="150">
	<img class="parallax-item" src="http://www.anjodeluz.net/Mashubi%20Rochell/earth.gif" width="150">
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="parallax.js"></script>
	</body>
	</html>
	/*
	*
	* Simple Parallax, 01/03/2012
	*
	* Contributors
	* @felquis, @cironunesdev
	* DEMO: http://jsfiddle.net/6qhVN/
	*/

	!(function( $, window, document ) {
	var $doc = $(document),
	body = document.body,
	val = 0.2,
	limit = 1;

	$(function(){

	$doc.on('mousemove', function( e ){

	var //first proprities to calculate the parallax
	xMouse = e.pageX,
	yMouse = e.pageY,
	xCenter = body.clientWidth / 2,
	yCenter = body.clientHeight / 2,
	offsetLeft = xMouse - xCenter,
	offsetTop = yMouse - yCenter,
	i,

	//then caching dom elem and your lenght
	$elem = $('.parallax-item');

	$elem.each(function( i ) {
	$(this).css({
	left: offsetLeft * val,
	top: offsetTop * val
	});

	console.log(val);

	val += 0.2;

	if( val === limit ) {
	val = 0.2;
	}
	});

	});

	});
	}( jQuery, window, document ))
	#parallax{
	position:relative;
	width:500px;
	height:500px;
	margin:5% auto;
	overflow:hidden;
	border:1px solid;
	}
	#parallax img{
	position:relative;
	margin:0 auto;
	display:block;
	}