🇬🇧 Refactored out layer parsing to updateLayers method.

Author: wagerfield

README.md

@@ -123,6 +123,7 @@ var scene = document.getElementById('scene');
 var parallax = new Parallax(scene);
 parallax.enable();
 parallax.disable();
+parallax.updateLayers(); // Useful for reparsing the layers in your scene if you change their data-depth value
 parallax.calibrate(false, true);
 parallax.invert(false, true);
 parallax.limit(false, 10);
@@ -164,6 +165,7 @@ $('#scene').parallax({
 var $scene = $('#scene').parallax();
 $scene.parallax('enable');
 $scene.parallax('disable');
+$scene.parallax('updateLayers');
 $scene.parallax('calibrate', false, true);
 $scene.parallax('invert', false, true);
 $scene.parallax('limit', false, 10);

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "parallax",
   "description": "Parallax Engine that reacts to the orientation of a smart device.",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "license": "MIT",
   "homepage": "http://wagerfield.github.io/parallax/",
   "authors": [

deploy/jquery.parallax.js

@@ -218,6 +218,24 @@
         position:'relative'
       });
     }
+
+    // Hardware Accelerate Context
+    this.accelerate(this.$context);
+
+    // Setup
+    this.updateLayers();
+    this.updateDimensions();
+    this.enable();
+    this.queueCalibration(this.calibrationDelay);
+  };
+
+  Plugin.prototype.updateLayers = function() {
+
+    // Cache Layer Elements
+    this.$layers = this.$context.find('.layer');
+    this.depths = [];
+
+    // Configure Layer Styles
     this.$layers.css({
       position:'absolute',
       display:'block',
@@ -228,19 +246,13 @@
       position:'relative'
     });
 
+    // Hardware Accelerate Layers
+    this.accelerate(this.$layers);
+
     // Cache Depths
     this.$layers.each($.proxy(function(index, element) {
       this.depths.push($(element).data('depth') || 0);
     }, this));
-
-    // Hardware Accelerate Elements
-    this.accelerate(this.$context);
-    this.accelerate(this.$layers);
-
-    // Setup
-    this.updateDimensions();
-    this.enable();
-    this.queueCalibration(this.calibrationDelay);
   };
 
   Plugin.prototype.updateDimensions = function() {
@@ -490,6 +502,7 @@
   var API = {
     enable: Plugin.prototype.enable,
     disable: Plugin.prototype.disable,
+    updateLayers: Plugin.prototype.updateLayers,
     calibrate: Plugin.prototype.calibrate,
     friction: Plugin.prototype.friction,
     invert: Plugin.prototype.invert,

deploy/jquery.parallax.min.js

@@ -252,6 +252,19 @@
       this.element.style.position = 'relative';
     }
 
+    // Setup
+    this.updateLayers();
+    this.updateDimensions();
+    this.enable();
+    this.queueCalibration(this.calibrationDelay);
+  };
+
+  Parallax.prototype.updateLayers = function() {
+
+    // Cache Layer Elements
+    this.layers = this.element.getElementsByClassName('layer');
+    this.depths = [];
+
     // Configure Layer Styles
     for (var i = 0, l = this.layers.length; i < l; i++) {
       var layer = this.layers[i];
@@ -264,11 +277,6 @@
       // Cache Layer Depth
       this.depths.push(this.data(layer, 'depth') || 0);
     }
-
-    // Setup
-    this.updateDimensions();
-    this.enable();
-    this.queueCalibration(this.calibrationDelay);
   };
 
   Parallax.prototype.updateDimensions = function() {

deploy/parallax.js

@@ -1,7 +1,7 @@
 {
   "name": "parallax",
   "description": "Parallax Engine that reacts to the orientation of a smart device.",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "license": "MIT",
   "homepage": "http://wagerfield.github.io/parallax/",
   "author": "Matthew Wagerfield <[email protected]>",

deploy/parallax.min.js

@@ -187,6 +187,24 @@
         position:'relative'
       });
     }
+
+    // Hardware Accelerate Context
+    this.accelerate(this.$context);
+
+    // Setup
+    this.updateLayers();
+    this.updateDimensions();
+    this.enable();
+    this.queueCalibration(this.calibrationDelay);
+  };
+
+  Plugin.prototype.updateLayers = function() {
+
+    // Cache Layer Elements
+    this.$layers = this.$context.find('.layer');
+    this.depths = [];
+
+    // Configure Layer Styles
     this.$layers.css({
       position:'absolute',
       display:'block',
@@ -197,19 +215,13 @@
       position:'relative'
     });
 
+    // Hardware Accelerate Layers
+    this.accelerate(this.$layers);
+
     // Cache Depths
     this.$layers.each($.proxy(function(index, element) {
       this.depths.push($(element).data('depth') || 0);
     }, this));
-
-    // Hardware Accelerate Elements
-    this.accelerate(this.$context);
-    this.accelerate(this.$layers);
-
-    // Setup
-    this.updateDimensions();
-    this.enable();
-    this.queueCalibration(this.calibrationDelay);
   };
 
   Plugin.prototype.updateDimensions = function() {
@@ -459,6 +471,7 @@
   var API = {
     enable: Plugin.prototype.enable,
     disable: Plugin.prototype.disable,
+    updateLayers: Plugin.prototype.updateLayers,
     calibrate: Plugin.prototype.calibrate,
     friction: Plugin.prototype.friction,
     invert: Plugin.prototype.invert,

package.json

@@ -221,6 +221,19 @@
       this.element.style.position = 'relative';
     }
 
+    // Setup
+    this.updateLayers();
+    this.updateDimensions();
+    this.enable();
+    this.queueCalibration(this.calibrationDelay);
+  };
+
+  Parallax.prototype.updateLayers = function() {
+
+    // Cache Layer Elements
+    this.layers = this.element.getElementsByClassName('layer');
+    this.depths = [];
+
     // Configure Layer Styles
     for (var i = 0, l = this.layers.length; i < l; i++) {
       var layer = this.layers[i];
@@ -233,11 +246,6 @@
       // Cache Layer Depth
       this.depths.push(this.data(layer, 'depth') || 0);
     }
-
-    // Setup
-    this.updateDimensions();
-    this.enable();
-    this.queueCalibration(this.calibrationDelay);
   };
 
   Parallax.prototype.updateDimensions = function() {