Version 1.6.2: Add gyroscope samples

micku7zu · Apr 12, 2019 · 30a8ec0 · 30a8ec0
1 parent 91bc380
commit 30a8ec0
Show file tree

Hide file tree

Showing 12 changed files with 275 additions and 117 deletions.
diff --git a/README.md b/README.md
@@ -42,6 +42,7 @@ If you want to use this library in IE, you need to include a CustomEvent polyfil
     gyroscopeMaxAngleX:     45,     // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
     gyroscopeMinAngleY:     -45,    // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
     gyroscopeMaxAngleY:     45,     // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
+    gyroscopeSamples:       10      // How many gyroscope moves to decide the starting position.
 }
 ```
 
@@ -87,10 +88,6 @@ Also available on npm https://www.npmjs.com/package/vanilla-tilt
 npm install vanilla-tilt
 ```
 
-#### Typings
-
-Typings were out of date in the previous version, so I've rolled a copy directly into the application for you would be Typescript junkies!
-
 ### Credits
 
 Original library: [Tilt.js](http://gijsroge.github.io/tilt.js/)

diff --git a/dist/vanilla-tilt.babel.js b/dist/vanilla-tilt.babel.js
@@ -11,7 +11,7 @@ var classCallCheck = function (instance, Constructor) {
  * Created by Șandor Sergiu (micku7zu) on 1/27/2017.
  * Original idea: https://github.com/gijsroge/tilt.js
  * MIT License.
- * Version 1.6.1
+ * Version 1.6.2
  */
 
 var VanillaTilt = function () {
@@ -27,6 +27,12 @@ var VanillaTilt = function () {
     this.height = null;
     this.left = null;
     this.top = null;
+
+    this.gammazero = null;
+    this.betazero = null;
+    this.lastgammazero = null;
+    this.lastbetazero = null;
+
     this.transitionTimeout = null;
     this.updateCall = null;
 
@@ -43,6 +49,7 @@ var VanillaTilt = function () {
     this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
     this.fullPageListening = this.isSettingTrue(this.settings["full-page-listening"]);
     this.gyroscope = this.isSettingTrue(this.settings.gyroscope);
+    this.gyroscopeSamples = this.settings.gyroscopeSamples;
 
     if (this.glare) {
       this.prepareGlare();
@@ -156,14 +163,29 @@ var VanillaTilt = function () {
 
     this.updateElementPosition();
 
+    if (this.gyroscopeSamples > 0) {
+      this.lastgammazero = this.gammazero;
+      this.lastbetazero = this.betazero;
+
+      if (this.gammazero === null) {
+        this.gammazero = event.gamma;
+        this.betazero = event.beta;
+      } else {
+        this.gammazero = (event.gamma + this.lastgammazero) / 2;
+        this.betazero = (event.beta + this.lastbetazero) / 2;
+      }
+
+      this.gyroscopeSamples -= 1;
+    }
+
     var totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
     var totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
 
     var degreesPerPixelX = totalAngleX / this.width;
     var degreesPerPixelY = totalAngleY / this.height;
 
-    var angleX = event.gamma - this.settings.gyroscopeMinAngleX;
-    var angleY = event.beta - this.settings.gyroscopeMinAngleY;
+    var angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
+    var angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
 
     var posX = angleX / degreesPerPixelX;
     var posY = angleY / degreesPerPixelY;
@@ -224,12 +246,15 @@ var VanillaTilt = function () {
   };
 
   VanillaTilt.prototype.getValues = function getValues() {
+    var x = void 0,
+        y = void 0;
+
     if (this.fullPageListening) {
-      var x = this.event.clientX / document.body.clientWidth;
-      var y = this.event.clientY / document.body.clientHeight;
+      x = this.event.clientX / document.body.clientWidth;
+      y = this.event.clientY / document.body.clientHeight;
     } else {
-      var x = (this.event.clientX - this.left) / this.width;
-      var y = (this.event.clientY - this.top) / this.height;
+      x = (this.event.clientX - this.left) / this.width;
+      y = (this.event.clientY - this.top) / this.height;
     }
 
     x = Math.min(Math.max(x, 0), 1);
@@ -364,10 +389,12 @@ var VanillaTilt = function () {
    * @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
    * @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
    * @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
+   * @param {boolean} settings.full-page-listening - If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
    * @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
    * @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
    * @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
    * @param {gyroscopeSensitivity} settings.gyroscopeSensitivity - Between 0 and 1 - The angle at which max tilt position is reached. 1 = 90deg, 0.5 = 45deg, etc..
+   * @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position.
    */
 
 
@@ -391,7 +418,8 @@ var VanillaTilt = function () {
       gyroscopeMinAngleX: -45,
       gyroscopeMaxAngleX: 45,
       gyroscopeMinAngleY: -45,
-      gyroscopeMaxAngleY: 45
+      gyroscopeMaxAngleY: 45,
+      gyroscopeSamples: 10
     };
 
     var newSettings = {};

diff --git a/dist/vanilla-tilt.babel.min.js b/dist/vanilla-tilt.babel.min.js
diff --git a/dist/vanilla-tilt.js b/dist/vanilla-tilt.js
@@ -5,7 +5,7 @@ var VanillaTilt = (function () {
  * Created by Șandor Sergiu (micku7zu) on 1/27/2017.
  * Original idea: https://github.com/gijsroge/tilt.js
  * MIT License.
- * Version 1.6.1
+ * Version 1.6.2
  */
 
 class VanillaTilt {
@@ -18,6 +18,12 @@ class VanillaTilt {
     this.height = null;
     this.left = null;
     this.top = null;
+
+    this.gammazero = null;
+    this.betazero = null;
+    this.lastgammazero = null;
+    this.lastbetazero = null;
+
     this.transitionTimeout = null;
     this.updateCall = null;
 
@@ -34,6 +40,7 @@ class VanillaTilt {
     this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
     this.fullPageListening = this.isSettingTrue(this.settings["full-page-listening"]);
     this.gyroscope = this.isSettingTrue(this.settings.gyroscope);
+    this.gyroscopeSamples = this.settings.gyroscopeSamples;
 
     if (this.glare) {
       this.prepareGlare();
@@ -83,9 +90,9 @@ class VanillaTilt {
     this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
 
     if (this.fullPageListening) {
-        window.document.addEventListener("mousemove", this.onMouseMoveBind);
+      window.document.addEventListener("mousemove", this.onMouseMoveBind);
     } else {
-        this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
+      this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
     }
 
     if (this.glare) {
@@ -105,9 +112,9 @@ class VanillaTilt {
     this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
 
     if (this.fullPageListening) {
-        window.document.removeEventListener("mousemove", this.onMouseMoveBind);
+      window.document.removeEventListener("mousemove", this.onMouseMoveBind);
     } else {
-        this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
+      this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
     }
 
     if (this.gyroscope) {
@@ -141,14 +148,29 @@ class VanillaTilt {
 
     this.updateElementPosition();
 
+    if (this.gyroscopeSamples > 0) {
+      this.lastgammazero = this.gammazero;
+      this.lastbetazero = this.betazero;
+
+      if (this.gammazero === null) {
+        this.gammazero = event.gamma;
+        this.betazero = event.beta;
+      } else {
+        this.gammazero = (event.gamma + this.lastgammazero) / 2;
+        this.betazero = (event.beta + this.lastbetazero) / 2;
+      }
+
+      this.gyroscopeSamples -= 1;
+    }
+
     const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
     const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;
 
     const degreesPerPixelX = totalAngleX / this.width;
     const degreesPerPixelY = totalAngleY / this.height;
 
-    const angleX = event.gamma - this.settings.gyroscopeMinAngleX;
-    const angleY = event.beta - this.settings.gyroscopeMinAngleY;
+    const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
+    const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);
 
     const posX = angleX / degreesPerPixelX;
     const posY = angleY / degreesPerPixelY;
@@ -181,7 +203,9 @@ class VanillaTilt {
   }
 
   onMouseLeave() {
-    if (this.fullPageListening) { return; }
+    if (this.fullPageListening) {
+      return;
+    }
 
     this.setTransition();
 
@@ -210,12 +234,14 @@ class VanillaTilt {
   }
 
   getValues() {
+    let x, y;
+
     if (this.fullPageListening) {
-        var x = this.event.clientX / document.body.clientWidth;
-        var y = this.event.clientY / document.body.clientHeight;
+      x = this.event.clientX / document.body.clientWidth;
+      y = this.event.clientY / document.body.clientHeight;
     } else {
-        var x = (this.event.clientX - this.left) / this.width;
-        var y = (this.event.clientY - this.top) / this.height;
+      x = (this.event.clientX - this.left) / this.width;
+      y = (this.event.clientY - this.top) / this.height;
     }
 
     x = Math.min(Math.max(x, 0), 1);
@@ -350,10 +376,12 @@ class VanillaTilt {
    * @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
    * @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
    * @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
+   * @param {boolean} settings.full-page-listening - If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
    * @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
    * @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
    * @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
    * @param {gyroscopeSensitivity} settings.gyroscopeSensitivity - Between 0 and 1 - The angle at which max tilt position is reached. 1 = 90deg, 0.5 = 45deg, etc..
+   * @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position.
    */
   extendSettings(settings) {
     let defaultSettings = {
@@ -376,6 +404,7 @@ class VanillaTilt {
       gyroscopeMaxAngleX: 45,
       gyroscopeMinAngleY: -45,
       gyroscopeMaxAngleY: 45,
+      gyroscopeSamples: 10
     };
 
     let newSettings = {};