Adding more flexibility for mouse move events +build

dist/vanilla-tilt.babel.js

@@ -34,12 +34,13 @@ var VanillaTilt = function () {
     this.resetBind = this.reset.bind(this);
 
     this.element = element;
+    this.elementListener = this.getElementListener();
     this.settings = this.extendSettings(settings);
 
     this.reverse = this.settings.reverse ? -1 : 1;
 
     this.glare = this.isSettingTrue(this.settings.glare);
-    this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
+    this.glarePrerender = this.isSettingTrue(this.settings['glare-prerender']);
 
     if (this.glare) {
       this.prepareGlare();
@@ -52,26 +53,63 @@ var VanillaTilt = function () {
     return setting === "" || setting === true || setting === 1;
   };
 
+  /**
+   * Method returns element what will be listen mouse events
+   * @return {Node}
+   */
+
+
+  VanillaTilt.prototype.getElementListener = function getElementListener() {
+    if (!this.settings.mouseEventElement) {
+      return this.element;
+    }
+
+    if (typeof this.settings.mouseEventElement === 'string') {
+      var mouseEventElement = document.querySelector(this.settings.mouseEventElement);
+
+      if (mouseEventElement) {
+        return mouseEventElement;
+      }
+    }
+
+    if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
+      return this.settings.mouseEventElement;
+    }
+  };
+
+  /**
+   * Method set listen methods for this.elementListener
+   * @return {Node}
+   */
+
+
   VanillaTilt.prototype.addEventListeners = function addEventListeners() {
     this.onMouseEnterBind = this.onMouseEnter.bind(this);
     this.onMouseMoveBind = this.onMouseMove.bind(this);
     this.onMouseLeaveBind = this.onMouseLeave.bind(this);
     this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
 
-    this.element.addEventListener("mouseenter", this.onMouseEnterBind);
-    this.element.addEventListener("mousemove", this.onMouseMoveBind);
-    this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
+    this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
+    this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
+
     if (this.glare) {
-      window.addEventListener("resize", this.onWindowResizeBind);
+      window.addEventListener('resize', this.onWindowResizeBind);
     }
   };
 
+  /**
+   * Method remove event listeners from current this.elementListener
+   */
+
+
   VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
-    this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
-    this.element.removeEventListener("mousemove", this.onMouseMoveBind);
-    this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind);
+    this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind);
+    this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind);
+
     if (this.glare) {
-      window.removeEventListener("resize", this.onWindowResizeBind);
+      window.removeEventListener('resize', this.onWindowResizeBind);
     }
   };
 
@@ -90,9 +128,9 @@ var VanillaTilt = function () {
     this.element = null;
   };
 
-  VanillaTilt.prototype.onMouseEnter = function onMouseEnter(event) {
+  VanillaTilt.prototype.onMouseEnter = function onMouseEnter() {
     this.updateElementPosition();
-    this.element.style.willChange = "transform";
+    this.element.style.willChange = 'transform';
     this.setTransition();
   };
 
@@ -105,7 +143,7 @@ var VanillaTilt = function () {
     this.updateCall = requestAnimationFrame(this.updateBind);
   };
 
-  VanillaTilt.prototype.onMouseLeave = function onMouseLeave(event) {
+  VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
     this.setTransition();
 
     if (this.settings.reset) {
@@ -249,20 +287,39 @@ var VanillaTilt = function () {
     }, this.settings.speed);
   };
 
+  /**
+   * Method return patched settings of instance
+   * @param {boolean} settings.reverse - reverse the tilt direction
+   * @param {number} settings.max - max tilt rotation (degrees)
+   * @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets
+   * @param {string} settings.easing - Easing on enter/exit
+   * @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc..
+   * @param {number} settings.speed - Speed of the enter/exit transition
+   * @param {boolean} settings.transition - Set a transition on enter/exit
+   * @param settings.axis - What axis should be disabled. Can be X or Y
+   * @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.reset - false = If the tilt effect has to be reset on exit
+   * @param {boolean} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
+   */
+
+
   VanillaTilt.prototype.extendSettings = function extendSettings(settings) {
     var defaultSettings = {
       reverse: false,
       max: 35,
       perspective: 1000,
-      easing: "cubic-bezier(.03,.98,.52,.99)",
-      scale: "1",
-      speed: "300",
+      easing: 'cubic-bezier(.03,.98,.52,.99)',
+      scale: 1,
+      speed: 300,
       transition: true,
       axis: null,
       glare: false,
-      "max-glare": 1,
+      'max-glare': 1,
       "glare-prerender": false,
-      reset: true
+      reset: true,
+      mouseEventElement: null
     };
 
     var newSettings = {};

dist/vanilla-tilt.js

@@ -25,12 +25,13 @@ class VanillaTilt {
     this.resetBind = this.reset.bind(this);
 
     this.element = element;
+    this.elementListener = this.getElementListener();
     this.settings = this.extendSettings(settings);
 
     this.reverse = this.settings.reverse ? -1 : 1;
 
     this.glare = this.isSettingTrue(this.settings.glare);
-    this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
+    this.glarePrerender = this.isSettingTrue(this.settings['glare-prerender']);
 
     if (this.glare) {
       this.prepareGlare();
@@ -43,26 +44,55 @@ class VanillaTilt {
     return setting === "" || setting === true || setting === 1;
   }
 
+  /**
+   * Method returns element what will be listen mouse events
+   * @return {Node}
+   */
+  getElementListener() {
+    if (!this.settings.mouseEventElement) { return this.element; }
+
+    if (typeof this.settings.mouseEventElement === 'string') {
+      const mouseEventElement = document.querySelector(this.settings.mouseEventElement);
+
+      if (mouseEventElement) {
+        return mouseEventElement;
+      }
+    }
+
+    if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
+      return this.settings.mouseEventElement;
+    }
+  }
+
+  /**
+   * Method set listen methods for this.elementListener
+   * @return {Node}
+   */
   addEventListeners() {
     this.onMouseEnterBind = this.onMouseEnter.bind(this);
     this.onMouseMoveBind = this.onMouseMove.bind(this);
     this.onMouseLeaveBind = this.onMouseLeave.bind(this);
     this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
 
-    this.element.addEventListener("mouseenter", this.onMouseEnterBind);
-    this.element.addEventListener("mousemove", this.onMouseMoveBind);
-    this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
+    this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
+    this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
+
     if (this.glare) {
-      window.addEventListener("resize", this.onWindowResizeBind);
+      window.addEventListener('resize', this.onWindowResizeBind);
     }
   }
 
+  /**
+   * Method remove event listeners from current this.elementListener
+   */
   removeEventListeners() {
-    this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
-    this.element.removeEventListener("mousemove", this.onMouseMoveBind);
-    this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind);
+    this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind);
+    this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind);
+
     if (this.glare) {
-      window.removeEventListener("resize", this.onWindowResizeBind);
+      window.removeEventListener('resize', this.onWindowResizeBind);
     }
   }
 
@@ -81,9 +111,9 @@ class VanillaTilt {
     this.element = null;
   }
 
-  onMouseEnter(event) {
+  onMouseEnter() {
     this.updateElementPosition();
-    this.element.style.willChange = "transform";
+    this.element.style.willChange = 'transform';
     this.setTransition();
   }
 
@@ -96,7 +126,7 @@ class VanillaTilt {
     this.updateCall = requestAnimationFrame(this.updateBind);
   }
 
-  onMouseLeave(event) {
+  onMouseLeave() {
     this.setTransition();
 
     if (this.settings.reset) {
@@ -243,20 +273,37 @@ class VanillaTilt {
 
   }
 
+  /**
+   * Method return patched settings of instance
+   * @param {boolean} settings.reverse - reverse the tilt direction
+   * @param {number} settings.max - max tilt rotation (degrees)
+   * @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets
+   * @param {string} settings.easing - Easing on enter/exit
+   * @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc..
+   * @param {number} settings.speed - Speed of the enter/exit transition
+   * @param {boolean} settings.transition - Set a transition on enter/exit
+   * @param settings.axis - What axis should be disabled. Can be X or Y
+   * @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.reset - false = If the tilt effect has to be reset on exit
+   * @param {boolean} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
+   */
   extendSettings(settings) {
     let defaultSettings = {
       reverse: false,
       max: 35,
       perspective: 1000,
-      easing: "cubic-bezier(.03,.98,.52,.99)",
-      scale: "1",
-      speed: "300",
+      easing: 'cubic-bezier(.03,.98,.52,.99)',
+      scale: 1,
+      speed: 300,
       transition: true,
       axis: null,
       glare: false,
-      "max-glare": 1,
+      'max-glare': 1,
       "glare-prerender": false,
-      reset: true
+      reset: true,
+      mouseEventElement: null,
     };
 
     let newSettings = {};

lib/README.md

@@ -41,7 +41,7 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
 ```js
 const element = document.querySelector(".js-tilt");
 VanillaTilt.init(element);
-element.addEventListeners("tiltChange", callback);
+element.addEventListener("tiltChange", callback);
 ```
 
 ### Methods

lib/vanilla-tilt.es2015.js

@@ -22,12 +22,13 @@ class VanillaTilt {
     this.resetBind = this.reset.bind(this);
 
     this.element = element;
+    this.elementListener = this.getElementListener();
     this.settings = this.extendSettings(settings);
 
     this.reverse = this.settings.reverse ? -1 : 1;
 
     this.glare = this.isSettingTrue(this.settings.glare);
-    this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
+    this.glarePrerender = this.isSettingTrue(this.settings['glare-prerender']);
 
     if (this.glare) {
       this.prepareGlare();
@@ -40,26 +41,55 @@ class VanillaTilt {
     return setting === "" || setting === true || setting === 1;
   }
 
+  /**
+   * Method returns element what will be listen mouse events
+   * @return {Node}
+   */
+  getElementListener() {
+    if (!this.settings.mouseEventElement) { return this.element; }
+
+    if (typeof this.settings.mouseEventElement === 'string') {
+      const mouseEventElement = document.querySelector(this.settings.mouseEventElement);
+
+      if (mouseEventElement) {
+        return mouseEventElement;
+      }
+    }
+
+    if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
+      return this.settings.mouseEventElement;
+    }
+  }
+
+  /**
+   * Method set listen methods for this.elementListener
+   * @return {Node}
+   */
   addEventListeners() {
     this.onMouseEnterBind = this.onMouseEnter.bind(this);
     this.onMouseMoveBind = this.onMouseMove.bind(this);
     this.onMouseLeaveBind = this.onMouseLeave.bind(this);
     this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
 
-    this.element.addEventListener("mouseenter", this.onMouseEnterBind);
-    this.element.addEventListener("mousemove", this.onMouseMoveBind);
-    this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
+    this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
+    this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
+
     if (this.glare) {
-      window.addEventListener("resize", this.onWindowResizeBind);
+      window.addEventListener('resize', this.onWindowResizeBind);
     }
   }
 
+  /**
+   * Method remove event listeners from current this.elementListener
+   */
   removeEventListeners() {
-    this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
-    this.element.removeEventListener("mousemove", this.onMouseMoveBind);
-    this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind);
+    this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind);
+    this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind);
+
     if (this.glare) {
-      window.removeEventListener("resize", this.onWindowResizeBind);
+      window.removeEventListener('resize', this.onWindowResizeBind);
     }
   }
 
@@ -78,9 +108,9 @@ class VanillaTilt {
     this.element = null;
   }
 
-  onMouseEnter(event) {
+  onMouseEnter() {
     this.updateElementPosition();
-    this.element.style.willChange = "transform";
+    this.element.style.willChange = 'transform';
     this.setTransition();
   }
 
@@ -93,7 +123,7 @@ class VanillaTilt {
     this.updateCall = requestAnimationFrame(this.updateBind);
   }
 
-  onMouseLeave(event) {
+  onMouseLeave() {
     this.setTransition();
 
     if (this.settings.reset) {
@@ -240,20 +270,37 @@ class VanillaTilt {
 
   }
 
+  /**
+   * Method return patched settings of instance
+   * @param {boolean} settings.reverse - reverse the tilt direction
+   * @param {number} settings.max - max tilt rotation (degrees)
+   * @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets
+   * @param {string} settings.easing - Easing on enter/exit
+   * @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc..
+   * @param {number} settings.speed - Speed of the enter/exit transition
+   * @param {boolean} settings.transition - Set a transition on enter/exit
+   * @param settings.axis - What axis should be disabled. Can be X or Y
+   * @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.reset - false = If the tilt effect has to be reset on exit
+   * @param {boolean} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
+   */
   extendSettings(settings) {
     let defaultSettings = {
       reverse: false,
       max: 35,
       perspective: 1000,
-      easing: "cubic-bezier(.03,.98,.52,.99)",
-      scale: "1",
-      speed: "300",
+      easing: 'cubic-bezier(.03,.98,.52,.99)',
+      scale: 1,
+      speed: 300,
       transition: true,
       axis: null,
       glare: false,
-      "max-glare": 1,
+      'max-glare': 1,
       "glare-prerender": false,
-      reset: true
+      reset: true,
+      mouseEventElement: null,
     };
 
     let newSettings = {};

lib/vanilla-tilt.js

@@ -33,12 +33,13 @@ var VanillaTilt = function () {
     this.resetBind = this.reset.bind(this);
 
     this.element = element;
+    this.elementListener = this.getElementListener();
     this.settings = this.extendSettings(settings);
 
     this.reverse = this.settings.reverse ? -1 : 1;
 
     this.glare = this.isSettingTrue(this.settings.glare);
-    this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
+    this.glarePrerender = this.isSettingTrue(this.settings['glare-prerender']);
 
     if (this.glare) {
       this.prepareGlare();
@@ -51,26 +52,63 @@ var VanillaTilt = function () {
     return setting === "" || setting === true || setting === 1;
   };
 
+  /**
+   * Method returns element what will be listen mouse events
+   * @return {Node}
+   */
+
+
+  VanillaTilt.prototype.getElementListener = function getElementListener() {
+    if (!this.settings.mouseEventElement) {
+      return this.element;
+    }
+
+    if (typeof this.settings.mouseEventElement === 'string') {
+      var mouseEventElement = document.querySelector(this.settings.mouseEventElement);
+
+      if (mouseEventElement) {
+        return mouseEventElement;
+      }
+    }
+
+    if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
+      return this.settings.mouseEventElement;
+    }
+  };
+
+  /**
+   * Method set listen methods for this.elementListener
+   * @return {Node}
+   */
+
+
   VanillaTilt.prototype.addEventListeners = function addEventListeners() {
     this.onMouseEnterBind = this.onMouseEnter.bind(this);
     this.onMouseMoveBind = this.onMouseMove.bind(this);
     this.onMouseLeaveBind = this.onMouseLeave.bind(this);
     this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
 
-    this.element.addEventListener("mouseenter", this.onMouseEnterBind);
-    this.element.addEventListener("mousemove", this.onMouseMoveBind);
-    this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
+    this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
+    this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
+
     if (this.glare) {
-      window.addEventListener("resize", this.onWindowResizeBind);
+      window.addEventListener('resize', this.onWindowResizeBind);
     }
   };
 
+  /**
+   * Method remove event listeners from current this.elementListener
+   */
+
+
   VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
-    this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
-    this.element.removeEventListener("mousemove", this.onMouseMoveBind);
-    this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind);
+    this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind);
+    this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind);
+
     if (this.glare) {
-      window.removeEventListener("resize", this.onWindowResizeBind);
+      window.removeEventListener('resize', this.onWindowResizeBind);
     }
   };
 
@@ -89,9 +127,9 @@ var VanillaTilt = function () {
     this.element = null;
   };
 
-  VanillaTilt.prototype.onMouseEnter = function onMouseEnter(event) {
+  VanillaTilt.prototype.onMouseEnter = function onMouseEnter() {
     this.updateElementPosition();
-    this.element.style.willChange = "transform";
+    this.element.style.willChange = 'transform';
     this.setTransition();
   };
 
@@ -104,7 +142,7 @@ var VanillaTilt = function () {
     this.updateCall = requestAnimationFrame(this.updateBind);
   };
 
-  VanillaTilt.prototype.onMouseLeave = function onMouseLeave(event) {
+  VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
     this.setTransition();
 
     if (this.settings.reset) {
@@ -248,20 +286,39 @@ var VanillaTilt = function () {
     }, this.settings.speed);
   };
 
+  /**
+   * Method return patched settings of instance
+   * @param {boolean} settings.reverse - reverse the tilt direction
+   * @param {number} settings.max - max tilt rotation (degrees)
+   * @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets
+   * @param {string} settings.easing - Easing on enter/exit
+   * @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc..
+   * @param {number} settings.speed - Speed of the enter/exit transition
+   * @param {boolean} settings.transition - Set a transition on enter/exit
+   * @param settings.axis - What axis should be disabled. Can be X or Y
+   * @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.reset - false = If the tilt effect has to be reset on exit
+   * @param {boolean} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
+   */
+
+
   VanillaTilt.prototype.extendSettings = function extendSettings(settings) {
     var defaultSettings = {
       reverse: false,
       max: 35,
       perspective: 1000,
-      easing: "cubic-bezier(.03,.98,.52,.99)",
-      scale: "1",
-      speed: "300",
+      easing: 'cubic-bezier(.03,.98,.52,.99)',
+      scale: 1,
+      speed: 300,
       transition: true,
       axis: null,
       glare: false,
-      "max-glare": 1,
+      'max-glare': 1,
       "glare-prerender": false,
-      reset: true
+      reset: true,
+      mouseEventElement: null
     };
 
     var newSettings = {};