From 6664ce64ed54e38ef3479f7a17a7f3e9ba826279 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Tue, 10 Jun 2014 15:07:11 -0500
Subject: [PATCH] implement position option and update documentation
 accordingly

---
 README.md       | 16 ++++++++++
 parallax.js     | 81 ++++++++++++++++++++++++++++++++++++++++++++-----
 parallax.min.js |  4 +--
 3 files changed, 91 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 36c092f..b7f23be 100644
--- a/README.md
+++ b/README.md
@@ -69,6 +69,22 @@ Note that when specifying these options as html data-attributes, you should conv
 			<td>number</td>
 			<td>auto</td>
 		</tr>
+		<tr>
+			<td>position</td>
+			<td>xPos yPos</td>
+			<td>center center</td>
+			<td rowspan="3">This is analogous to the background-position css property. Specify coordinates as top, bottom, right, left, center, or pixel values (i.e. -10px 0px). The parallax image will be positioned as close to these values as possible while still covering the target element.</td>
+		</tr>
+		<tr>
+			<td>positionX</td>
+			<td>xPos</td>
+			<td>center</td>
+		</tr>
+		<tr>
+			<td>positionY</td>
+			<td>yPos</td>
+			<td>center</td>
+		</tr>
 		<tr>
 			<td>speed</td>
 			<td>float</td>
diff --git a/parallax.js b/parallax.js
index 064213c..ec7b2cd 100644
--- a/parallax.js
+++ b/parallax.js
@@ -1,5 +1,5 @@
 /*!
- * parallax.js v1.0.1 (http://pixelcog.github.io/parallax.js/)
+ * parallax.js v1.1 (http://pixelcog.github.io/parallax.js/)
  * Copyright (c) 2014 PixelCog, Inc.
  * Licensed under MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
  */
@@ -55,12 +55,53 @@
       this.imageSrc = this.$element.attr('src');
     }
 
+    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
+
+    if (positions.length < 1) {
+      positions.push('center');
+    }
+    if (positions.length == 1) {
+      positions.push(positions[0]);
+    }
+
+    if (positions[0] == 'top' || positions[0] == 'bottom' ||
+        positions[1] == 'left' || positions[1] == 'right') {
+      self.positionX = positions[1];
+      self.positionY = positions[0];
+    } else {
+      self.positionX = positions[0];
+      self.positionY = positions[1];
+    }
+
+    if (this.positionX != undefined) positions[0] = this.positionX.toLowerCase();
+    if (this.positionY != undefined) positions[1] = this.positionY.toLowerCase();
+
+    if (this.positionX != 'left' && this.positionX != 'right') {
+      if (isNaN(parseInt(this.positionX))) {
+        this.positionX = 'center';
+      } else {
+        this.positionX = parseInt(this.positionX);
+      }
+    }
+
+    if (this.positionY != 'top' && this.positionY != 'bottom') {
+      if (isNaN(parseInt(this.positionY))) {
+        this.positionY = 'center';
+      } else {
+        this.positionY = parseInt(this.positionY);
+      }
+    }
+
+    this.position =
+      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
+      this.positionY + (isNaN(this.positionY)? '' : 'px');
+
     if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
       if (this.iosFix && !this.$element.is('img')) {
         this.$element.css({
           backgroundImage: 'url(' + encodeURIComponent(this.imageSrc) + ')',
           backgroundSize: 'cover',
-          backgroundPosition: 'center'
+          backgroundPosition: this.position
         });
       }
       return this;
@@ -103,10 +144,11 @@
   // Parallax Instance Methods
 
   $.extend(Parallax.prototype, {
-    speed:  0.2,
-    bleed:  0,
-    zIndex: -100,
-    iosFix: true,
+    speed:    0.2,
+    bleed:    0,
+    zIndex:   -100,
+    iosFix:   true,
+	position: 'center',
 
     refresh: function() {
       this.boxWidth        = this.$element.width();
@@ -115,19 +157,42 @@
       this.boxOffsetLeft   = this.$element.offset().left;
       this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
 
+      var margin = 0;
       var winHeight = Parallax.winHeight;
       var imageHeightMin = winHeight - (winHeight - this.boxHeight) * this.speed | 0;
 
       if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
         this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
         this.imageHeight   = imageHeightMin;
-        this.offsetLeft    = (this.boxWidth - this.imageWidth) / 2 | 0;
         this.offsetBaseTop = 0;
+
+        margin = this.imageWidth - this.boxWidth;
+
+        if (this.positionX == 'left') {
+          this.offsetLeft = 0;
+        } else if (this.positionX == 'right') {
+          this.offsetLeft = - margin;
+        } else if (!isNaN(this.positionX)) {
+          this.offsetLeft = Math.max(this.positionX, - margin);
+        } else {
+          this.offsetLeft = - margin / 2 | 0;
+        }
       } else {
         this.imageWidth    = this.boxWidth;
         this.imageHeight   = this.boxWidth / this.aspectRatio | 0;
         this.offsetLeft    = 0;
-        this.offsetBaseTop = (imageHeightMin - this.imageHeight) / 2 | 0;
+
+        margin = this.imageHeight - imageHeightMin;
+
+        if (this.positionY == 'top') {
+          this.offsetBaseTop = 0;
+        } else if (this.positionY == 'bottom') {
+          this.offsetBaseTop = - margin;
+        } else if (!isNaN(this.positionY)) {
+          this.offsetBaseTop = Math.max(this.positionY, - margin);
+        } else {
+          this.offsetBaseTop = - margin / 2 | 0;
+        }
       }
     },
 
diff --git a/parallax.min.js b/parallax.min.js
index 4353aba..9adc981 100644
--- a/parallax.min.js
+++ b/parallax.min.js
@@ -1,6 +1,6 @@
 /*!
- * parallax.js v1.0.1 (http://pixelcog.github.io/parallax.js/)
+ * parallax.js v1.1 (http://pixelcog.github.io/parallax.js/)
  * Copyright (c) 2014 PixelCog, Inc.
  * Licensed under MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
  */
-(function($,window,document,undefined){(function(){var lastTime=0;var vendors=["ms","moz","webkit","o"];for(var x=0;x<vendors.length&&!window.requestAnimationFrame;++x){window.requestAnimationFrame=window[vendors[x]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[vendors[x]+"CancelAnimationFrame"]||window[vendors[x]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame)window.requestAnimationFrame=function(callback,element){var currTime=(new Date).getTime();var timeToCall=Math.max(0,16-(currTime-lastTime));var id=window.setTimeout(function(){callback(currTime+timeToCall)},timeToCall);lastTime=currTime+timeToCall;return id};if(!window.cancelAnimationFrame)window.cancelAnimationFrame=function(id){clearTimeout(id)}})();var $body=$("body");var $window=$(window);function Parallax(element,options){var self=this;if(typeof options=="object"){delete options.refresh;delete options.render;$.extend(this,options)}this.$element=$(element);if(!this.imageSrc&&this.$element.is("img")){this.imageSrc=this.$element.attr("src")}if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){if(this.iosFix&&!this.$element.is("img")){this.$element.css({backgroundImage:"url("+encodeURIComponent(this.imageSrc)+")",backgroundSize:"cover",backgroundPosition:"center"})}return this}this.$mirror=$("<div />").prependTo("body");this.$slider=$("<img />").prependTo(this.$mirror);this.$mirror.addClass("parallax-mirror").css({visibility:"hidden",zIndex:this.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"});this.$slider.addClass("parallax-slider").one("load",function(){if(!self.naturalHeight||!self.naturalWidth){self.naturalHeight=this.naturalHeight||this.height||1;self.naturalWidth=this.naturalWidth||this.width||1}self.aspectRatio=self.naturalWidth/self.naturalHeight;Parallax.isSetup||Parallax.setup();Parallax.sliders.push(self);Parallax.isFresh=false;Parallax.requestRender()});this.$slider[0].src=this.imageSrc;if(this.naturalHeight&&this.naturalWidth||this.$slider[0].complete){this.$slider.trigger("load")}}$.extend(Parallax.prototype,{speed:.2,bleed:0,zIndex:-100,iosFix:true,refresh:function(){this.boxWidth=this.$element.width();this.boxHeight=this.$element.height()+this.bleed*2;this.boxOffsetTop=this.$element.offset().top-this.bleed;this.boxOffsetLeft=this.$element.offset().left;this.boxOffsetBottom=this.boxOffsetTop+this.boxHeight;var winHeight=Parallax.winHeight;var imageHeightMin=winHeight-(winHeight-this.boxHeight)*this.speed|0;if(imageHeightMin*this.aspectRatio>=this.boxWidth){this.imageWidth=imageHeightMin*this.aspectRatio|0;this.imageHeight=imageHeightMin;this.offsetLeft=(this.boxWidth-this.imageWidth)/2|0;this.offsetBaseTop=0}else{this.imageWidth=this.boxWidth;this.imageHeight=this.boxWidth/this.aspectRatio|0;this.offsetLeft=0;this.offsetBaseTop=(imageHeightMin-this.imageHeight)/2|0}},render:function(){var scrollTop=Parallax.scrollTop;var scrollLeft=Parallax.scrollLeft;var scrollBottom=scrollTop+Parallax.winHeight;if(this.boxOffsetBottom>scrollTop&&this.boxOffsetTop<scrollBottom){this.visibility="visible"}else{this.visibility="hidden"}this.mirrorTop=this.boxOffsetTop-scrollTop;this.mirrorLeft=this.boxOffsetLeft-scrollLeft;this.offsetTop=this.offsetBaseTop-this.mirrorTop*(1-this.speed);this.$mirror.css({transform:"translate3d(0px, 0px, 0px)",visibility:this.visibility,top:this.mirrorTop,left:this.mirrorLeft,height:this.boxHeight,width:this.boxWidth});this.$slider.css({transform:"translate3d(0px, 0px, 0px)",position:"absolute",top:this.offsetTop,left:this.offsetLeft,height:this.imageHeight,width:this.imageWidth})}});$.extend(Parallax,{scrollTop:0,scrollLeft:0,winHeight:0,winWidth:0,docHeight:1<<30,docWidth:1<<30,sliders:[],isReady:false,isFresh:false,isBusy:false,setup:function(){if(this.isReady)return;$window.on("scroll.px.parallax load.px.parallax",function(){var scrollTopMax=Parallax.docHeight-Parallax.winHeight;var scrollLeftMax=Parallax.docWidth-Parallax.winWidth;Parallax.scrollTop=Math.max(0,Math.min(scrollTopMax,$window.scrollTop()));Parallax.scrollLeft=Math.max(0,Math.min(scrollLeftMax,$window.scrollLeft()));Parallax.requestRender()}).on("resize.px.parallax load.px.parallax",function(){Parallax.winHeight=$window.height();Parallax.winWidth=$window.width();Parallax.docHeight=$(document).height();Parallax.docWidth=$(document).width();Parallax.isFresh=false;Parallax.requestRender()});this.isReady=true},configure:function(options){if(typeof options=="object"){delete options.refresh;delete options.render;$.extend(this.prototype,options)}},refresh:function(){$.each(this.sliders,function(){this.refresh()});this.isFresh=true},render:function(){this.isFresh||this.refresh();$.each(this.sliders,function(){this.render()})},requestRender:function(){var self=this;if(!this.isBusy){this.isBusy=true;window.requestAnimationFrame(function(){self.render();self.isBusy=false})}}});function Plugin(option){return this.each(function(){var $this=$(this);var options=typeof option=="object"&&option;if(this==window||this==document||$this.is("body")){Parallax.configure(options)}else if(!$this.data("px.parallax")){options=$.extend({},$this.data(),options);$this.data("px.parallax",new Parallax(this,options))}if(typeof option=="string"){Parallax[option]()}})}var old=$.fn.parallax;$.fn.parallax=Plugin;$.fn.parallax.Constructor=Parallax;$.fn.parallax.noConflict=function(){$.fn.parallax=old;return this};$(document).on("ready.px.parallax.data-api",function(){$('[data-parallax="scroll"]').parallax()})})(jQuery,window,document);
+(function($,window,document,undefined){(function(){var lastTime=0;var vendors=["ms","moz","webkit","o"];for(var x=0;x<vendors.length&&!window.requestAnimationFrame;++x){window.requestAnimationFrame=window[vendors[x]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[vendors[x]+"CancelAnimationFrame"]||window[vendors[x]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame)window.requestAnimationFrame=function(callback,element){var currTime=(new Date).getTime();var timeToCall=Math.max(0,16-(currTime-lastTime));var id=window.setTimeout(function(){callback(currTime+timeToCall)},timeToCall);lastTime=currTime+timeToCall;return id};if(!window.cancelAnimationFrame)window.cancelAnimationFrame=function(id){clearTimeout(id)}})();var $body=$("body");var $window=$(window);function Parallax(element,options){var self=this;if(typeof options=="object"){delete options.refresh;delete options.render;$.extend(this,options)}this.$element=$(element);if(!this.imageSrc&&this.$element.is("img")){this.imageSrc=this.$element.attr("src")}var positions=(this.position+"").toLowerCase().match(/\S+/g)||[];if(positions.length<1){positions.push("center")}if(positions.length==1){positions.push(positions[0])}if(positions[0]=="top"||positions[0]=="bottom"||positions[1]=="left"||positions[1]=="right"){self.positionX=positions[1];self.positionY=positions[0]}else{self.positionX=positions[0];self.positionY=positions[1]}if(this.positionX!=undefined)positions[0]=this.positionX.toLowerCase();if(this.positionY!=undefined)positions[1]=this.positionY.toLowerCase();if(this.positionX!="left"&&this.positionX!="right"){if(isNaN(parseInt(this.positionX))){this.positionX="center"}else{this.positionX=parseInt(this.positionX)}}if(this.positionY!="top"&&this.positionY!="bottom"){if(isNaN(parseInt(this.positionY))){this.positionY="center"}else{this.positionY=parseInt(this.positionY)}}this.position=this.positionX+(isNaN(this.positionX)?"":"px")+" "+this.positionY+(isNaN(this.positionY)?"":"px");if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){if(this.iosFix&&!this.$element.is("img")){this.$element.css({backgroundImage:"url("+encodeURIComponent(this.imageSrc)+")",backgroundSize:"cover",backgroundPosition:this.position})}return this}this.$mirror=$("<div />").prependTo("body");this.$slider=$("<img />").prependTo(this.$mirror);this.$mirror.addClass("parallax-mirror").css({visibility:"hidden",zIndex:this.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"});this.$slider.addClass("parallax-slider").one("load",function(){if(!self.naturalHeight||!self.naturalWidth){self.naturalHeight=this.naturalHeight||this.height||1;self.naturalWidth=this.naturalWidth||this.width||1}self.aspectRatio=self.naturalWidth/self.naturalHeight;Parallax.isSetup||Parallax.setup();Parallax.sliders.push(self);Parallax.isFresh=false;Parallax.requestRender()});this.$slider[0].src=this.imageSrc;if(this.naturalHeight&&this.naturalWidth||this.$slider[0].complete){this.$slider.trigger("load")}}$.extend(Parallax.prototype,{speed:.2,bleed:0,zIndex:-100,iosFix:true,position:"center",refresh:function(){this.boxWidth=this.$element.width();this.boxHeight=this.$element.height()+this.bleed*2;this.boxOffsetTop=this.$element.offset().top-this.bleed;this.boxOffsetLeft=this.$element.offset().left;this.boxOffsetBottom=this.boxOffsetTop+this.boxHeight;var margin=0;var winHeight=Parallax.winHeight;var imageHeightMin=winHeight-(winHeight-this.boxHeight)*this.speed|0;if(imageHeightMin*this.aspectRatio>=this.boxWidth){this.imageWidth=imageHeightMin*this.aspectRatio|0;this.imageHeight=imageHeightMin;this.offsetBaseTop=0;margin=this.imageWidth-this.boxWidth;if(this.positionX=="left"){this.offsetLeft=0}else if(this.positionX=="right"){this.offsetLeft=-margin}else if(!isNaN(this.positionX)){this.offsetLeft=Math.max(this.positionX,-margin)}else{this.offsetLeft=-margin/2|0}}else{this.imageWidth=this.boxWidth;this.imageHeight=this.boxWidth/this.aspectRatio|0;this.offsetLeft=0;margin=this.imageHeight-imageHeightMin;if(this.positionY=="top"){this.offsetBaseTop=0}else if(this.positionY=="bottom"){this.offsetBaseTop=-margin}else if(!isNaN(this.positionY)){this.offsetBaseTop=Math.max(this.positionY,-margin)}else{this.offsetBaseTop=-margin/2|0}}},render:function(){var scrollTop=Parallax.scrollTop;var scrollLeft=Parallax.scrollLeft;var scrollBottom=scrollTop+Parallax.winHeight;if(this.boxOffsetBottom>scrollTop&&this.boxOffsetTop<scrollBottom){this.visibility="visible"}else{this.visibility="hidden"}this.mirrorTop=this.boxOffsetTop-scrollTop;this.mirrorLeft=this.boxOffsetLeft-scrollLeft;this.offsetTop=this.offsetBaseTop-this.mirrorTop*(1-this.speed);this.$mirror.css({transform:"translate3d(0px, 0px, 0px)",visibility:this.visibility,top:this.mirrorTop,left:this.mirrorLeft,height:this.boxHeight,width:this.boxWidth});this.$slider.css({transform:"translate3d(0px, 0px, 0px)",position:"absolute",top:this.offsetTop,left:this.offsetLeft,height:this.imageHeight,width:this.imageWidth})}});$.extend(Parallax,{scrollTop:0,scrollLeft:0,winHeight:0,winWidth:0,docHeight:1<<30,docWidth:1<<30,sliders:[],isReady:false,isFresh:false,isBusy:false,setup:function(){if(this.isReady)return;$window.on("scroll.px.parallax load.px.parallax",function(){var scrollTopMax=Parallax.docHeight-Parallax.winHeight;var scrollLeftMax=Parallax.docWidth-Parallax.winWidth;Parallax.scrollTop=Math.max(0,Math.min(scrollTopMax,$window.scrollTop()));Parallax.scrollLeft=Math.max(0,Math.min(scrollLeftMax,$window.scrollLeft()));Parallax.requestRender()}).on("resize.px.parallax load.px.parallax",function(){Parallax.winHeight=$window.height();Parallax.winWidth=$window.width();Parallax.docHeight=$(document).height();Parallax.docWidth=$(document).width();Parallax.isFresh=false;Parallax.requestRender()});this.isReady=true},configure:function(options){if(typeof options=="object"){delete options.refresh;delete options.render;$.extend(this.prototype,options)}},refresh:function(){$.each(this.sliders,function(){this.refresh()});this.isFresh=true},render:function(){this.isFresh||this.refresh();$.each(this.sliders,function(){this.render()})},requestRender:function(){var self=this;if(!this.isBusy){this.isBusy=true;window.requestAnimationFrame(function(){self.render();self.isBusy=false})}}});function Plugin(option){return this.each(function(){var $this=$(this);var options=typeof option=="object"&&option;if(this==window||this==document||$this.is("body")){Parallax.configure(options)}else if(!$this.data("px.parallax")){options=$.extend({},$this.data(),options);$this.data("px.parallax",new Parallax(this,options))}if(typeof option=="string"){Parallax[option]()}})}var old=$.fn.parallax;$.fn.parallax=Plugin;$.fn.parallax.Constructor=Parallax;$.fn.parallax.noConflict=function(){$.fn.parallax=old;return this};$(document).on("ready.px.parallax.data-api",function(){$('[data-parallax="scroll"]').parallax()})})(jQuery,window,document);