Added some options

README.markdown

@@ -3,28 +3,52 @@ jQuery Parallax
 
 jQuery Parallax is a script that simulates the parallax effect as seen on [nikebetterworld.com](http://www.nikebetterworld.com/).
 
-Plugin: jQuery Parallax  
-Version: 1.1.3
-Author: [Ian Lunn](http://www.ianlunn.co.uk/)  
-Twitter: [@IanLunn](http://www.twitter.com/IanLunn)
-Demo: [jQuery Vertical Parallax Demo](http://www.ianlunn.co.uk/plugins/jquery-parallax/)  
-Tutorial: [Nikebetterworld Parallax Effect Demo](http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/)  
-
-Dual licensed under the MIT and GPL licenses:
-http://www.opensource.org/licenses/mit-license.php
-http://www.gnu.org/licenses/gpl.html
-
-Updates
+Usage
 -------
 
-12/6/2012 - Fixed a few demo bugs and made easier to use
-    - Fixed a bug that prevented the third section from working
-    - Removed the need to use the adjuster value
+Add script
+```html
+<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+<script src="javascripts/jquery-parallax.js"></script>
+```
+Add class to the elements needed parallax effect (ex. parallax-bg)
+```html
+<div id='parallax1' class='parallax-bg'></div>
+```
+Make sure the elements got a background image, for best effect the images height should be 20% larger than container element height (if using default speedFactor).  For example:
+```css
+.parallax-bg {
+    margin: 0 auto;
+    padding: 0;
+    position: absolute;
+    z-index: 200;
+    width: 100%;
+    height: 500px;
+}
+```
+Here we have a element with 500px in height, so the background images should have more than 600px in height. 
 
-8/5/2012 - Fixed height/outerHeight parameter
-	- Smoother effect when scrolling
-	- Fixed positioning with scaled backgrounds
-	- Reduced code
-	- Now passes jsl 0.3.0 without warnings
+Initiate parallax:
+```js
+$(window).load(function() {
+    $('.parallax-bg').parallax({offsetY:-200}); //in case of big image, you can offset a little bit to center it.
+}
+```
 
-26/10/2011 - Updated to work with jQuery 1.6.4
+Viola! You now have a simple parallax page!!
+
+API
+-------
+Basic usage
+```js
+$(selector).parallax(options);
+```
+###Options
+####offsetX `default: 50%`
+x-pos of background image.
+####offsetY `default: 0`
+y-pos offset of background image.
+####speedFactor `default: 0.12`
+Background image moving speed relative to scrolling speed. Where parallax magic happens.
+####outerHeight `default: true`
+If true use jQuery's [.outerHeight()](http://api.jquery.com/outerHeight/), else use jQuery's [.height()](http://api.jquery.com/height/).

scripts/jquery.parallax-1.1.3.js

@@ -18,52 +18,50 @@ http://www.gnu.org/licenses/gpl.html
 	$window.resize(function () {
 		windowHeight = $window.height();
 	});
-
-	$.fn.parallax = function(xpos, speedFactor, outerHeight) {
-		var $this = $(this);
+
+
+    $.fn.parallax = function(options) {
+        var defaults = {
+            offsetX: "50%",
+            speedFactor: 0.12,
+            outerHeight: true,
+            offsetY: 0
+        }
+
+        var $this = $(this);
+        var options = $.extend(defaults, options); 
 		var getHeight;
-		var firstTop;
 		var paddingTop = 0;
-
-		//get the starting position of each element to have parallax applied to it		
-		$this.each(function(){
-		    firstTop = $this.offset().top;
-		});
 
-		if (outerHeight) {
-			getHeight = function(jqo) {
+
+		getHeight = function(jqo, outerheight) {
+			if (outerheight) {
 				return jqo.outerHeight(true);
-			};
-		} else {
-			getHeight = function(jqo) {
-				return jqo.height();
-			};
-		}
-
-		// setup defaults if arguments aren't specified
-		if (arguments.length < 1 || xpos === null) xpos = "50%";
-		if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
-		if (arguments.length < 3 || outerHeight === null) outerHeight = true;
-
-		// function to be called whenever the window is scrolled or resized
-		function update(){
+			} else {
+				return jqo.height()
+			}
+		};
+
+        function update(){
 			var pos = $window.scrollTop();				
 
 			$this.each(function(){
 				var $element = $(this);
 				var top = $element.offset().top;
-				var height = getHeight($element);
+				var height = getHeight($element, options.outerHeight);
 
 				// Check if totally above or totally below viewport
 				if (top + height < pos || top > pos + windowHeight) {
 					return;
 				}
 
-				$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
+				$this.css('backgroundPosition', options.offsetX + " " + Math.round((top - pos - (windowHeight/2)) * options.speedFactor + options.offsetY) + "px");
 			});
-		}		
-
-		$window.bind('scroll', update).resize(update);
+		}	
+        
+        $window.bind('scroll', update).resize(update);
 		update();
-	};
+    }
 })(jQuery);
+
+