From 57bf3f8152b0b3061ba77000848346444f70b11d Mon Sep 17 00:00:00 2001 From: Jeremiah Hoyet Date: Sat, 3 Aug 2013 12:56:19 -0300 Subject: [PATCH 1/2] Added Horizontal Moving Added function arguments to allow moving elements on the x-axis (horizontally). --- index.html | 26 +++++++++++++------------- scripts/jquery.parallax-1.1.3.js | 18 ++++++++++++++++-- 2 files changed, 29 insertions(+), 15 deletions(-) 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..1fde7e3 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,18 @@ 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; + } + + $this.css('backgroundPosition', xpos + "px " + Math.round((firstTop - pos) * speedFactor) + "px"); }); } From 6403029cc4867a47b452911ba9049924c61f27b6 Mon Sep 17 00:00:00 2001 From: Jeremiah Hoyet Date: Sat, 3 Aug 2013 13:01:53 -0300 Subject: [PATCH 2/2] Fixed Position Syntax Problem Previous changes cause syntax error when xMove was not enabled. --- scripts/jquery.parallax-1.1.3.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/scripts/jquery.parallax-1.1.3.js b/scripts/jquery.parallax-1.1.3.js index 1fde7e3..14c8119 100644 --- a/scripts/jquery.parallax-1.1.3.js +++ b/scripts/jquery.parallax-1.1.3.js @@ -73,7 +73,12 @@ http://www.gnu.org/licenses/gpl.html return; } - $this.css('backgroundPosition', xpos + "px " + Math.round((firstTop - pos) * speedFactor) + "px"); + 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"); + } }); }