diff --git a/README.markdown b/README.markdown index 002eba9..cb125b9 100644 --- a/README.markdown +++ b/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 + + +``` +Add class to the elements needed parallax effect (ex. parallax-bg) +```html +
+``` +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/). diff --git a/scripts/jquery.parallax-1.1.3.js b/scripts/jquery.parallax-1.1.3.js index f3569dc..4c9e8fc 100644 --- a/scripts/jquery.parallax-1.1.3.js +++ b/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); + +