From 83995a0c6bd32c8e336423ec794554724636d397 Mon Sep 17 00:00:00 2001
From: "Patrick B. Gibson" <patrick@fadeover.org>
Date: Sun, 18 Feb 2018 18:53:15 -0800
Subject: [PATCH 1/3] Add 3D Tilting similar to tilt.js.

---
 src/parallax.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/parallax.js b/src/parallax.js
index 3c345b3..4296170 100644
--- a/src/parallax.js
+++ b/src/parallax.js
@@ -129,6 +129,7 @@ const MAGIC_NUMBER = 30,
       DEFAULTS = {
         relativeInput: false,
         clipRelativeInput: false,
+        tilt: false,
         inputElement: null,
         hoverOnly: false,
         calibrationThreshold: 100,
@@ -174,6 +175,7 @@ class Parallax {
       precision: helpers.data(this.element, 'precision'),
       relativeInput: helpers.data(this.element, 'relative-input'),
       clipRelativeInput: helpers.data(this.element, 'clip-relative-input'),
+      tilt: helpers.data(this.element, 'tilt'),
       hoverOnly: helpers.data(this.element, 'hover-only'),
       inputElement: document.querySelector(helpers.data(this.element, 'input-element')),
       selector: helpers.data(this.element, 'selector')
@@ -431,6 +433,15 @@ class Parallax {
     }
   }
 
+  setTransform(element, x, y) {
+    var perspective = 2000;
+    var scale = 1;
+    element.style.transform = "perspective(" + perspective + "px) " +
+      "rotateX(" + y + "deg) " +
+      "rotateY(" + x + "deg) " +
+      "scale3d(" + scale + ", " + scale + ", " + scale + ")";
+  }
+
   onOrientationTimer() {
     if (this.orientationSupport && this.orientationStatus === 0) {
       this.disable()
@@ -489,7 +500,11 @@ class Parallax {
           depthY = this.depthsY[index],
           xOffset = this.velocityX * (depthX * (this.invertX ? -1 : 1)),
           yOffset = this.velocityY * (depthY * (this.invertY ? -1 : 1))
-      this.setPosition(layer, xOffset, yOffset)
+        if (this.tilt) {
+          this.setTransform(layer, xOffset, yOffset);
+        } else {
+          this.setPosition(layer, xOffset, yOffset);
+        }
     }
     this.raf = rqAnFr(this.onAnimationFrame)
   }

From 38bce37d13183ad28351118070740730912f3025 Mon Sep 17 00:00:00 2001
From: "Patrick B. Gibson" <patrick@fadeover.org>
Date: Sun, 18 Feb 2018 19:00:02 -0800
Subject: [PATCH 2/3] Scale and Perspective should be options

---
 src/parallax.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/parallax.js b/src/parallax.js
index 4296170..cd93ffd 100644
--- a/src/parallax.js
+++ b/src/parallax.js
@@ -130,6 +130,8 @@ const MAGIC_NUMBER = 30,
         relativeInput: false,
         clipRelativeInput: false,
         tilt: false,
+        tiltPerspective: 2000,
+        tiltScale: 1,
         inputElement: null,
         hoverOnly: false,
         calibrationThreshold: 100,
@@ -176,6 +178,8 @@ class Parallax {
       relativeInput: helpers.data(this.element, 'relative-input'),
       clipRelativeInput: helpers.data(this.element, 'clip-relative-input'),
       tilt: helpers.data(this.element, 'tilt'),
+      tiltPerspective: helpers.data(this.element, 'tilt-perspective'),
+      tiltScale: helpers.data(this.element, 'tilt-scale'),
       hoverOnly: helpers.data(this.element, 'hover-only'),
       inputElement: document.querySelector(helpers.data(this.element, 'input-element')),
       selector: helpers.data(this.element, 'selector')
@@ -434,8 +438,8 @@ class Parallax {
   }
 
   setTransform(element, x, y) {
-    var perspective = 2000;
-    var scale = 1;
+    var perspective = this.tiltPerspective;
+    var scale = this.tiltScale;
     element.style.transform = "perspective(" + perspective + "px) " +
       "rotateX(" + y + "deg) " +
       "rotateY(" + x + "deg) " +

From 8079462d608962a98f2eb432144afe97477880fe Mon Sep 17 00:00:00 2001
From: "Patrick B. Gibson" <patrick@fadeover.org>
Date: Sun, 18 Feb 2018 21:16:58 -0800
Subject: [PATCH 3/3] add continueAnimatingWhileDisabled option,
 resetTransform(), and flip the transform y axis.

---
 src/parallax.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/parallax.js b/src/parallax.js
index cd93ffd..848ab42 100644
--- a/src/parallax.js
+++ b/src/parallax.js
@@ -152,7 +152,8 @@ const MAGIC_NUMBER = 30,
         pointerEvents: false,
         precision: 1,
         onReady: null,
-        selector: null
+        selector: null,
+        continueAnimatingWhileDisabled: false,
       }
 
 class Parallax {
@@ -182,7 +183,8 @@ class Parallax {
       tiltScale: helpers.data(this.element, 'tilt-scale'),
       hoverOnly: helpers.data(this.element, 'hover-only'),
       inputElement: document.querySelector(helpers.data(this.element, 'input-element')),
-      selector: helpers.data(this.element, 'selector')
+      selector: helpers.data(this.element, 'selector'),
+      continueAnimatingWhileDisabled: helpers.data(this.element, 'continue-animating-while-disabled')
     }
 
     for (let key in data) {
@@ -386,7 +388,10 @@ class Parallax {
     }
 
     window.removeEventListener('resize', this.onWindowResize)
-    rqAnFr.cancel(this.raf)
+
+    if (!this.continueAnimatingWhileDisabled) {
+      rqAnFr.cancel(this.raf)
+    }
   }
 
   calibrate(x, y) {
@@ -442,10 +447,15 @@ class Parallax {
     var scale = this.tiltScale;
     element.style.transform = "perspective(" + perspective + "px) " +
       "rotateX(" + y + "deg) " +
-      "rotateY(" + x + "deg) " +
+      "rotateY(" + -x + "deg) " +
       "scale3d(" + scale + ", " + scale + ", " + scale + ")";
   }
 
+  resetTransform() {
+    this.inputX = this.calibrationX;
+    this.inputY = this.calibrationY;
+  }
+
   onOrientationTimer() {
     if (this.orientationSupport && this.orientationStatus === 0) {
       this.disable()