cironunes/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/2/
*
*/

!(function( $, window, document, undefined ) {
  var //first plugin configurations
  pluginName = 'simpleParallax',
  defaults = {
    limit: 1
  },

  //then dom aux elems
  $doc = $(document),
  body = document.body,

  //then calculation aux
  inc = 0.2,
  bodyX = body.clientWidth / 2,
  bodyY = body.clientHeight / 2;

  function Plugin( elem, options ) {
    this.elem = elem;
    this.$elem = $(this.elem);
    this.options = $.extend( {}, defaults, options );

    this._defaults = defaults;
    this._name = pluginName;

    this.init();
  }

  Plugin.prototype.handleMouseParallax = function( e ) {
    var mouseX = e.pageX,
      mouseY = e.pageY,

      offsetLeft = mouseX - bodyX,
      offsetTop = mouseY - bodyY,

      that = e.data.inst;

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

        inc += 0.2;

        if( inc === that._defaults.limit ) {
          inc = 0.2;
        }
      });
  };

  Plugin.prototype.init = function() {
    $doc.on('mousemove', { inst: this } ,this.handleMouseParallax);
  };

  $.fn[pluginName] = function( options ) {
    return this.each(function() {
      if( !$.data(this, 'plugin_' + pluginName) ) {
        $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
      }
    });
  };
}( 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/2/
	*
	*/

	!(function( $, window, document, undefined ) {
	var //first plugin configurations
	pluginName = 'simpleParallax',
	defaults = {
	limit: 1
	},

	//then dom aux elems
	$doc = $(document),
	body = document.body,

	//then calculation aux
	inc = 0.2,
	bodyX = body.clientWidth / 2,
	bodyY = body.clientHeight / 2;

	function Plugin( elem, options ) {
	this.elem = elem;
	this.$elem = $(this.elem);
	this.options = $.extend( {}, defaults, options );

	this._defaults = defaults;
	this._name = pluginName;

	this.init();
	}

	Plugin.prototype.handleMouseParallax = function( e ) {
	var mouseX = e.pageX,
	mouseY = e.pageY,

	offsetLeft = mouseX - bodyX,
	offsetTop = mouseY - bodyY,

	that = e.data.inst;

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

	inc += 0.2;

	if( inc === that._defaults.limit ) {
	inc = 0.2;
	}
	});
	};

	Plugin.prototype.init = function() {
	$doc.on('mousemove', { inst: this } ,this.handleMouseParallax);
	};

	$.fn[pluginName] = function( options ) {
	return this.each(function() {
	if( !$.data(this, 'plugin_' + pluginName) ) {
	$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
	}
	});
	};
	}( 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;
	}