Merge branch 'master' into master

wstoettinger · web-flow · commit d1ecd6bca858 · 2017-10-09T19:03:51.000+02:00
diff --git a/README.md b/README.md
@@ -6,25 +6,39 @@ Simple parallax scrolling effect inspired by [Spotify.com](http://spotify.com/)
 
 ## Installation
 
-Download package or install with Bower and include `parallax.min.js` in your document after including jQuery.
+### NPM
 
 ```bash
-$ bower i --save parallax.js
+npm i --save jquery-parallax.js
+```
+
+### Yarn
+
+```bash
+yarn add jquery-parallax.js
 ```
 
-Or install with NPM
+### Bower
+
+Please note that although Bower is still maintained, they recommend Yarn for new projects.
 
 ```bash
-$ npm i --save jquery-parallax.js
+$ bower i --save parallax.js
 ```
 
+### Setup
+
+Include `parallax.min.js` in your document after including jQuery.
+
 ```html
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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>
 ```
 
 ## Usage
 
+Please note, that `<!DOCTYPE html>` on top of your document is required!
+
 ### Via data attributes
 
 To easily add a parallax effect behind an element, add `data-parallax="scroll"` to the element you want to use, and specify an image with `data-image-src="/path/to/image.jpg"`.
@@ -43,7 +57,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.
 
@@ -178,6 +192,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>
 
diff --git a/parallax.js b/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));
diff --git a/parallax.min.js b/parallax.min.js
