diff --git a/index.html b/index.html index 0a07d59..7189ad1 100755 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + jQuery Parallax Plugin Demo @@ -16,8 +16,8 @@ //xPosition - Horizontal position of the element //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport - $('#intro').parallax("50%", 0.1); - $('#second').parallax("50%", 0.1); + $('#intro').parallax("50%", 0.1, true, true, "left", 0.1); + $('#second').parallax("50%", 0.1); $('.bg').parallax("50%", 0.4); $('#third').parallax("50%", 0.3); @@ -63,17 +63,17 @@

What Happens When JavaScript is Disabled?

-
+

Check out my new plugin Sequence.js for parallax effects and a whole lot more!

- -

Ian Lunn

- - -

This demo is based on the Nikebetterworld.com website.

+ +

Ian Lunn

+ + +

This demo is based on the Nikebetterworld.com website.

Credits

This plugin makes use of some scripts and images made by others:

diff --git a/scripts/jquery.parallax-1.1.3.js b/scripts/jquery.parallax-1.1.3.js index f3569dc..14c8119 100644 --- a/scripts/jquery.parallax-1.1.3.js +++ b/scripts/jquery.parallax-1.1.3.js @@ -19,7 +19,7 @@ http://www.gnu.org/licenses/gpl.html windowHeight = $window.height(); }); - $.fn.parallax = function(xpos, speedFactor, outerHeight) { + $.fn.parallax = function(xpos, speedFactor, outerHeight, xMove, xDirection, xSpeedFactor) { var $this = $(this); var getHeight; var firstTop; @@ -44,6 +44,9 @@ http://www.gnu.org/licenses/gpl.html 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; + if (arguments.length < 4 || xMove === null) xMove = false; + if (arguments.length < 5 || xDirection === null) xDirection = "right"; + if (arguments.length < 6 || xSpeedFactor === null) xSpeedFactor = 0.5; // function to be called whenever the window is scrolled or resized function update(){ @@ -59,7 +62,23 @@ http://www.gnu.org/licenses/gpl.html return; } - $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px"); + //Move horizontally if specified + if (xMove === true & xDirection === "right"){ + xpos = Math.round((firstTop + pos) * xSpeedFactor); + } + else if(xMove === true & xDirection === "left"){ + xpos = Math.round((firstTop - pos) * xSpeedFactor); + } + else{ + return; + } + + if(xMove === true){ + $this.css('backgroundPosition', xpos + "px " + Math.round((firstTop - pos) * speedFactor) + "px"); + } + else{ + $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px"); + } }); }