update parallax.js to v1.1 and add position option to the documentation

Author: mikegreiling

img/arrows.png

@@ -35,12 +35,12 @@
         <div id="ios-notice" class="alert alert-info hidden"><p><strong>Notice:</strong> Hello iOS user. Unfortunately, this parallax effect cannot be achieved on iOS devices, so all you will see on this demo page are static backgrounds.  Please visit this page on a desktop browser to see its full effect.</p></div>
         <h1>Simple Parallax Scrolling <small>parallax.js</small></h1>
         <p>Parallax.js is a dirt simple parallax scrolling effect inspired by <a href="http://spotify.com">Spotify.com</a> and implemented as a jQuery plugin.</p>
-        <a href="https://github.com/pixelcog/parallax.js/archive/v1.0.zip" class="btn btn-default download-link">Download Parallax.js v1.0</a>
+        <a href="https://github.com/pixelcog/parallax.js/archive/v1.1.zip" class="btn btn-default download-link">Download Parallax.js v1.1</a>
         <a href="https://github.com/pixelcog/parallax.js/" class="btn btn-default">View on GitHub</a>
       </div>
     </section>
 
-    <div class="parallax-container" data-parallax="scroll" data-bleed="10" data-image-src="./img/stellar-spire-eagle-nebula-1400x900.jpg" data-natural-width="1400" data-natural-height="900"></div>
+    <div class="parallax-container" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="./img/stellar-spire-eagle-nebula-1400x900.jpg" data-natural-width="1400" data-natural-height="900"></div>
 
     <section>
       <div class="container">
@@ -118,6 +118,22 @@ <h2 id="options">Options</h2>
                       <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>

index.html

@@ -1,5 +1,5 @@
 /*!
- * parallax.js v1.0 (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;
+        }
       }
     },
 
@@ -169,12 +234,12 @@
   // Parallax Static Methods
 
   $.extend(Parallax, {
-    scrollTop:    $window.scrollTop(),
-    scrollLeft:   $window.scrollLeft(),
+    scrollTop:    0,
+    scrollLeft:   0,
     winHeight:    0,
     winWidth:     0,
-    docHeight:    0,
-    docWidth:     0,
+    docHeight:    1 << 30,
+    docWidth:     1 << 30,
     sliders:      [],
     isReady:      false,
     isFresh:      false,
@@ -184,14 +249,14 @@
       if (this.isReady) return;
 
       $window
-        .on('scroll.px.parallax load.px.parallax', function(){
+        .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(){
+        .on('resize.px.parallax load.px.parallax', function() {
           Parallax.winHeight = $window.height();
           Parallax.winWidth  = $window.width();
           Parallax.docHeight = $(document).height();