Merge pull request #185 from DevNIX/master

Improved animation technique, fixes an issue which causes to scroll the parallax divs to a different speed

Author: wstoettinger

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];
@@ -154,7 +153,7 @@
       this.$slider.trigger('load');
     }
 
-  };
+  }
 
 
   // Parallax Instance Methods
@@ -182,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;
@@ -204,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;
@@ -234,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'
@@ -272,6 +268,8 @@
     setup: function() {
       if (this.isReady) return;
 
+      var self = this;
+
       var $doc = $(document), $win = $(window);
 
       var loadDimensions = function() {
@@ -292,6 +290,7 @@
 
       $win.on('resize.px.parallax load.px.parallax', function() {
           loadDimensions();
+          self.refresh();
           Parallax.isFresh = false;
           Parallax.requestRender();
         })
@@ -304,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) {
@@ -315,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,
@@ -374,13 +381,13 @@
       }
       if (typeof option == 'string') {
         if(option == 'destroy'){
-            Parallax['destroy'](this);
+            Parallax.destroy(this);
         }else{
           Parallax[option]();
         }
       }
-    })
-  };
+    });
+  }
 
   var old = $.fn.parallax;