Whole document mouse movement support (micku7zu#51)

* Whole document mouse movement support

Also updated CONTRIBUTORS.md

* Fixed a typo

CONTRIBUTORS.md

@@ -3,3 +3,5 @@
 - [Livio Brunner](https://github.com/BrunnerLivio) <<a href="mailto:contact@brunnerliv.io">contact@brunnerliv.io</a>> (Typings & Glare Effect)
 - [Oleg Postoev](https://github.com/Dok11)
 - [Matteo Rigon](https://github.com/matteo-rigon) (Device orientation support)
+- [Corey Austin](https://github.com/lazyhummingbird) (Initial gyroscope position)
+- [rrroyal](https://github.com/rrroyal) (Whole document mouse events listening)

README.md

@@ -28,18 +28,19 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
     speed:                  300,    // Speed of the enter/exit transition
     transition:             true,   // Set a transition on enter/exit.
     axis:                   null,   // What axis should be disabled. Can be X or Y.
-    reset:                  true    // If the tilt effect has to be reset on exit.
+    reset:                  true,   // If the tilt effect has to be reset on exit.
     easing:                 "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
-    glare:                  false   // if it should have a "glare" effect
+    glare:                  false,  // if it should have a "glare" effect
     "max-glare":            1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
     "glare-prerender":      false,  // false = VanillaTilt creates the glare elements for you, otherwise
                                     // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
-    "mouse-event-element":  null    // css-selector or link to HTML-element what will be listen mouse events 
-    gyroscope:              true    // Boolean to enable/disable device orientation detection,
-    gyroscopeMinAngleX:     -45     // This is the bottom 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 left border of the element;
-    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;
+    "mouse-event-element":  null,   // css-selector or link to HTML-element what will be listen mouse events
+    "full-page-listening":  false,  // If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
+    gyroscope:              true,   // Boolean to enable/disable device orientation detection,
+    gyroscopeMinAngleX:     -45,    // This is the bottom 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 left border of the element;
+    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;
 }
 ```
 
@@ -101,6 +102,7 @@ Original library author: [Gijs Rogé](https://twitter.com/GijsRoge)
 - [Oleg Postoev](https://github.com/Dok11)
 - [Matteo Rigon](https://github.com/matteo-rigon) (Device orientation support)
 - [Corey Austin](https://github.com/lazyhummingbird) (Initial gyroscope position)
+- [rrroyal](https://github.com/rrroyal) (Whole document mouse events listening)
 
 ### License
 

dist/vanilla-tilt.babel.js

@@ -41,6 +41,7 @@ var VanillaTilt = function () {
 
     this.glare = this.isSettingTrue(this.settings.glare);
     this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
+    this.fullPageListening = this.isSettingTrue(this.settings["full-page-listening"]);
     this.gyroscope = this.isSettingTrue(this.settings.gyroscope);
 
     if (this.glare) {
@@ -92,9 +93,14 @@ var VanillaTilt = function () {
     this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);
 
     this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
-    this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
     this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
 
+    if (this.fullPageListening) {
+      window.document.addEventListener("mousemove", this.onMouseMoveBind);
+    } else {
+      this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
+    }
+
     if (this.glare) {
       window.addEventListener("resize", this.onWindowResizeBind);
     }
@@ -111,9 +117,14 @@ var VanillaTilt = function () {
 
   VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
     this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
-    this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
     this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
 
+    if (this.fullPageListening) {
+      window.document.removeEventListener("mousemove", this.onMouseMoveBind);
+    } else {
+      this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
+    }
+
     if (this.gyroscope) {
       window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
     }
@@ -185,6 +196,10 @@ var VanillaTilt = function () {
   };
 
   VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
+    if (this.fullPageListening) {
+      return;
+    }
+
     this.setTransition();
 
     if (this.settings.reset) {
@@ -209,8 +224,13 @@ var VanillaTilt = function () {
   };
 
   VanillaTilt.prototype.getValues = function getValues() {
-    var x = (this.event.clientX - this.left) / this.width;
-    var y = (this.event.clientY - this.top) / this.height;
+    if (this.fullPageListening) {
+      var x = this.event.clientX / document.body.clientWidth;
+      var 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 = Math.min(Math.max(x, 0), 1);
     y = Math.min(Math.max(y, 0), 1);
@@ -364,6 +384,7 @@ var VanillaTilt = function () {
       glare: false,
       "max-glare": 1,
       "glare-prerender": false,
+      "full-page-listening": false,
       "mouse-event-element": null,
       reset: true,
       gyroscope: true,