Merge branch 'master' into patch-1

Author: wstoettinger

README.md

@@ -31,7 +31,7 @@ $ bower i --save parallax.js
 Include `parallax.min.js` in your document after including jQuery.
 
 ```html
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="/path/to/parallax.min.js"></script>
 ```
 
@@ -55,7 +55,7 @@ $('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});
 
 ### Notes
 
-What parallax.js will do is create a fixed-position element for each parallax image at the start of the document's body. This mirror element will sit behind the other elements and match the position and dimensions of its target object.
+What parallax.js will do is create a fixed-position element for each parallax image at the start of the document's body (or another configurable container). This mirror element will sit behind the other elements and match the position and dimensions of its target object.
 
 Due to the nature of this implementation, you must ensure that these parallax objects and any layers below them are transparent so that you can see the parallax effect underneath.  Also, if there is no other content in this element, you will need to ensure that it has some fixed dimensions otherwise you won't see anything.
 
@@ -190,6 +190,12 @@ Note that when specifying these options as html data-attributes, you should conv
 			<td>false</td>
 			<td>(Experimental) If true, will freeze the parallax effect when "over scrolling" in browsers like Safari to prevent unexpected gaps caused by negative scroll positions.</td>
 		</tr>
+		<tr>
+			<td>mirrorContainer</td>
+			<td>jQuery Selector</td>
+			<td>body</td>
+			<td>The parallax mirror will be prepended into this container.</td>
+		</tr>
 	</tbody>
 </table>
 

parallax.js

@@ -14,8 +14,7 @@
     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'];
+      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
     }
 
     if (!window.requestAnimationFrame)
@@ -65,8 +64,8 @@
       positions = [positions[1], positions[0]];
     }
 
-    if (this.positionX != undefined) positions[0] = this.positionX.toLowerCase();
-    if (this.positionY != undefined) positions[1] = this.positionY.toLowerCase();
+    if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
+    if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
 
     self.positionX = positions[0];
     self.positionY = positions[1];
@@ -113,7 +112,7 @@
       return this;
     }
 
-    this.$mirror = $('<div />').prependTo('body');
+    this.$mirror = $('<div />').prependTo(this.mirrorContainer);
 
     var slider = this.$element.find('>.parallax-slider');
     var sliderExisted = false;
@@ -154,7 +153,7 @@
       this.$slider.trigger('load');
     }
 
-  };
+  }
 
 
   // Parallax Instance Methods
@@ -167,6 +166,7 @@
     androidFix: true,
     position: 'center',
     overScrollFix: false,
+    mirrorContainer: 'body',
 
     refresh: function() {
       this.boxWidth        = this.$element.outerWidth();
@@ -181,13 +181,14 @@
       var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
       var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
       var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
+      var margin;
 
       if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
         this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
         this.imageHeight   = imageHeightMin;
         this.offsetBaseTop = imageOffsetMin;
 
-        var margin = this.imageWidth - this.boxWidth;
+        margin = this.imageWidth - this.boxWidth;
 
         if (this.positionX == 'left') {
           this.offsetLeft = 0;
@@ -203,7 +204,7 @@
         this.imageHeight   = this.boxWidth / this.aspectRatio | 0;
         this.offsetLeft    = 0;
 
-        var margin = this.imageHeight - imageHeightMin;
+        margin = this.imageHeight - imageHeightMin;
 
         if (this.positionY == 'top') {
           this.offsetBaseTop = imageOffsetMin;
@@ -233,19 +234,15 @@
       }
 
       this.$mirror.css({
-        transform: 'translate3d(0px, 0px, 0px)',
+        transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
         visibility: this.visibility,
-        top: this.mirrorTop - overScroll,
-        left: this.mirrorLeft,
         height: this.boxHeight,
         width: this.boxWidth
       });
 
       this.$slider.css({
-        transform: 'translate3d(0px, 0px, 0px)',
+        transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
         position: 'absolute',
-        top: this.offsetTop,
-        left: this.offsetLeft,
         height: this.imageHeight,
         width: this.imageWidth,
         maxWidth: 'none'
@@ -271,6 +268,8 @@
     setup: function() {
       if (this.isReady) return;
 
+      var self = this;
+
       var $doc = $(document), $win = $(window);
 
       var loadDimensions = function() {
@@ -291,6 +290,7 @@
 
       $win.on('resize.px.parallax load.px.parallax', function() {
           loadDimensions();
+          self.refresh();
           Parallax.isFresh = false;
           Parallax.requestRender();
         })
@@ -303,6 +303,20 @@
       loadScrollPosition();
 
       this.isReady = true;
+
+      var lastPosition = -1;
+
+      function frameLoop() {
+        if (lastPosition == window.pageYOffset) {   // Avoid overcalculations
+          window.requestAnimationFrame(frameLoop);
+          return false;
+        } else lastPosition = window.pageYOffset;
+
+        self.render();
+        window.requestAnimationFrame(frameLoop);
+      }
+
+      frameLoop();
     },
 
     configure: function(options) {
@@ -314,25 +328,19 @@
     },
 
     refresh: function() {
-      $.each(this.sliders, function(){ this.refresh() });
+      $.each(this.sliders, function(){ this.refresh(); });
       this.isFresh = true;
     },
 
     render: function() {
       this.isFresh || this.refresh();
-      $.each(this.sliders, function(){ this.render() });
+      $.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;
-        });
-      }
+      self.render();
+      self.isBusy = false;
     },
     destroy: function(el){
       var i,
@@ -373,13 +381,13 @@
       }
       if (typeof option == 'string') {
         if(option == 'destroy'){
-            Parallax['destroy'](this);
+            Parallax.destroy(this);
         }else{
           Parallax[option]();
         }
       }
-    })
-  };
+    });
+  }
 
   var old = $.fn.parallax;
 
@@ -397,8 +405,8 @@
 
   // Parallax Data-API
 
-  $(document).on('ready.px.parallax.data-api', function () {
-    $('[data-parallax="scroll"]').parallax();
+  $( function () { 
+    $('[data-parallax="scroll"]').parallax(); 
   });
 
 }(jQuery, window, document));