universal-tilt.js - npm Package Compare versions

Comparing version 0.5.1 to 1.0.0-beta.1

CHANGELOG.md

@@ -0,1 +1,14 @@
+# Changelog
 
+## 1.0.0 beta 1
+* npm added
+* AMD & CommonJS support added
+* redesigned demo page (new header view, dark theme)
+* updated README.md
+* added shadow-color option
+* renamed jQuery plugin from UniversalTilt() to universalTilt()
+
+## 0.5.0
+* Position Base option
+* mobile support (devices with gyroscope)
+* plugin works in vanillaJS as well as jQuery

dist/universal-tilt.babel.js

@@ -8,3 +8,3 @@ 'use strict';
 /*!
-* universal-tilt.js v0.5.1
+* universal-tilt.js v1.0 beta 1
 * Created 2018 by Jakub Biesiada
@@ -42,5 +42,3 @@ * Original idea: https://github.com/gijsroge/tilt.js
     // call shine function if shine setting enabled
-    if (this.settings.shine) {
-      this.shine();
-    }
+    if (this.settings.shine) this.shine();
 
@@ -144,22 +142,18 @@ this.element.style.transform = 'perspective(' + this.settings.perspective + 'px)';
 
-      if (this.settings.reset) {
-        this.element.style.transform = 'perspective(' + this.settings.perspective + 'px) rotateX(0deg) rotateY(0deg) scale(1)';
-      }
+      if (this.settings.reset) this.element.style.transform = 'perspective(' + this.settings.perspective + 'px) rotateX(0deg) rotateY(0deg) scale(1)';
 
       // set transition when is enabled
-      if (this.settings.transition) {
-        this.element.style.transition = 'all 500ms ' + this.settings.easing;
-      }
+      if (this.settings.transition) this.element.style.transition = 'all 500ms ' + this.settings.easing;
 
       // reset shine effect
       if (this.settings.shine && !this.settings['shine-save']) {
-        this.shineElement.style.transition = 'all 500ms ease';
-        this.shineElement.style.transform = 'rotate(180deg) translate3d(-50%, -50%, 0)';
-        this.shineElement.style.opacity = '0';
+        Object.assign(this.shineElement.style, {
+          'transition': 'all 500ms ease',
+          'transform': 'rotate(180deg) translate3d(-50%, -50%, 0)',
+          'opacity': '0'
+        });
       }
 
       // reset box shadow
-      if (this.settings.shadow && !this.settings['shadow-save']) {
-        this.element.style.boxShadow = '0 45px 100px rgba(0, 0, 0, 0)';
-      }
+      if (this.settings.shadow && !this.settings['shadow-save']) this.element.style.boxShadow = '0 45px 100px rgba(0, 0, 0, 0)';
     }
@@ -255,21 +249,17 @@ }, {
 
-      if (this.settings.transition) {
-        this.element.style.transition = 'all 100ms ' + this.settings.easing;
-      }
+      if (this.settings.transition) this.element.style.transition = 'all 100ms ' + this.settings.easing;
 
-      if (this.settings.shadow) {
-        this.boxShadow = '0 45px 100px rgba(0, 0, 0, 0.4)';
-      }
+      if (this.settings.shadow) this.boxShadow = '0 45px 100px ' + this.settings['shadow-color'];
 
-      this.element.style.transform = 'perspective(' + this.settings.perspective + 'px)\n    rotateX(' + (this.settings.disabled === "X" || this.settings.disabled === "x" ? 0 : values.tiltY) + 'deg)\n    rotateY(' + (this.settings.disabled === "Y" || this.settings.disabled === "y" ? 0 : values.tiltX) + 'deg)\n    scale(' + this.settings.scale + ')';
+      this.element.style.transform = 'perspective(' + this.settings.perspective + 'px)\n     rotateX(' + (this.settings.disabled === "X" || this.settings.disabled === "x" ? 0 : values.tiltY) + 'deg)\n     rotateY(' + (this.settings.disabled === "Y" || this.settings.disabled === "y" ? 0 : values.tiltX) + 'deg)\n     scale(' + this.settings.scale + ')';
 
       if (this.settings.shine) {
-        this.shineElement.style.transition = 'all 0ms ease';
-        this.shineElement.style.transform = 'rotate(' + -values.angle + 'deg) translate3d(-50%, -50%, 0)';
-        this.shineElement.style.opacity = '' + this.settings["shine-opacity"];
+        Object.assign(this.shineElement.style, {
+          'transition': 'all 0ms ease',
+          'transform': 'rotate(' + -values.angle + 'deg) translate3d(-50%, -50%, 0)',
+          'opacity': '' + this.settings["shine-opacity"]
+        });
       }
 
-      if (this.settings.shadow) {
-        this.element.style.boxShadow = this.boxShadow;
-      }
+      if (this.settings.shadow) this.element.style.boxShadow = this.boxShadow;
 
@@ -329,19 +319,20 @@ // tilt position change event
         'position-base': 'element', // element or window
-        reset: true,
+        reset: true, // allow/disable element position reset after mouseout
 
-        shadow: false,
-        'shadow-save': false,
+        shadow: false, // show/hide shadow
+        'shadow-save': false, // allow/disable element shadow hide after mouseout (shadow value must be true)
+        'shadow-color': 'rgba(0, 0, 0, 0.4)', // set color of tilt element shadow
 
-        shine: false,
-        'shine-opacity': 0,
-        'shine-save': false,
+        shine: false, // add/remove shine effect on mouseover
+        'shine-opacity': 0, // set shine opacity (0-1)
+        'shine-save': false, // save/reset shine effect on mouseout
 
-        max: 35,
-        perspective: 1000,
-        scale: 1.0,
-        disabled: null,
-        reverse: false,
+        max: 24,
+        perspective: 600, // tilt effect perspective
+        scale: 1.0, // element scale on mouseover
+        disabled: null, // disable axis (X or Y)
+        reverse: false, // reverse tilt effect directory
 
-        transition: true,
-        easing: 'cubic-bezier(.03,.98,.52,.99)'
+        transition: true, // allow/disable tilt effect transition
+        easing: 'cubic-bezier(.03,.98,.52,.99)' // set transition easing
       };
@@ -380,3 +371,3 @@
 
-  $.fn.UniversalTilt = function (options) {
+  $.fn.universalTilt = function (options) {
     for (var element = 0; element < this.length; element++) {
@@ -383,0 +374,0 @@ new UniversalTilt(this[element], options);

dist/universal-tilt.babel.min.js

@@ -1,1 +0,1 @@
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),UniversalTilt=function(){function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,e),t.length>0?this.init(t,i):0!==t.length&&(this.element=t,this.settings=this.settings(i),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform="perspective("+this.settings.perspective+"px)",this.addEventListeners())}return _createClass(e,[{key:"init",value:function(t,i){for(var n=0;n<t.length;n++)new e(t[n],i)}},{key:"addEventListeners",value:function(){var e=this;window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?(this.onDeviceMoveBind=this.onDeviceMove.bind(this),window.addEventListener("devicemotion",this.onDeviceMoveBind)):"element"===this.settings["position-base"]?(this.onMouseMoveBind=this.onMouseMove.bind(this),this.element.addEventListener("mousemove",this.onMouseMoveBind),this.element.addEventListener("mouseleave",function(){return e.onMouseLeave()})):"window"===this.settings["position-base"]&&(this.onMouseMoveBind=this.onMouseMove.bind(this),window.addEventListener("mousemove",this.onMouseMoveBind),window.addEventListener("mouseleave",function(){return e.onMouseLeave()}))}},{key:"onMouseMove",value:function(e){var t=this;this.event=e,this.updateElementPosition(),window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?this.update():window.requestAnimationFrame(function(){return t.update()})}},{key:"onMouseLeave",value:function(){var e=this;window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?this.reset():window.requestAnimationFrame(function(){return e.reset()})}},{key:"onDeviceMove",value:function(e){this.movementEvent=e,this.update(),this.updateElementPosition()}},{key:"reset",value:function(){this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.settings.reset&&(this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX(0deg) rotateY(0deg) scale(1)"),this.settings.transition&&(this.element.style.transition="all 500ms "+this.settings.easing),this.settings.shine&&!this.settings["shine-save"]&&(this.shineElement.style.transition="all 500ms ease",this.shineElement.style.transform="rotate(180deg) translate3d(-50%, -50%, 0)",this.shineElement.style.opacity="0"),this.settings.shadow&&!this.settings["shadow-save"]&&(this.element.style.boxShadow="0 45px 100px rgba(0, 0, 0, 0)")}},{key:"getValues",value:function(){var e,t;if(window.DeviceMotionEvent&&"ontouchstart"in document.documentElement){e=Math.round(event.accelerationIncludingGravity.x)/6,t=Math.round(event.accelerationIncludingGravity.y)/6;var i;90===window.orientation?(i=1-t,t=(1+e)/2,e=i/2):-90===window.orientation?(i=1+t,t=(1-e)/2,e=i/2):0===window.orientation?(t=(i=1+t)/2,e=(1+e)/2):180===window.orientation&&(t=(i=1-t)/2,e=(1-e)/2)}else"element"===this.settings["position-base"]?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):(e=this.event.clientX/window.innerWidth,t=this.event.clientY/window.innerHeight),e=Math.min(Math.max(e,0),1),t=Math.min(Math.max(t,0),1);var n=(this.settings.max/2-e*this.settings.max).toFixed(2),s=(t*this.settings.max-this.settings.max/2).toFixed(2),o=Math.atan2(.5-e,t-.5)*(180/Math.PI);return{tiltX:this.reverse*n,tiltY:this.reverse*s,percentageX:100*e,percentageY:100*t,angle:o}}},{key:"updateElementPosition",value:function(){var e=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=e.left,this.top=e.top}},{key:"update",value:function(){var e=this.getValues();this.settings.transition&&(this.element.style.transition="all 100ms "+this.settings.easing),this.settings.shadow&&(this.boxShadow="0 45px 100px rgba(0, 0, 0, 0.4)"),this.element.style.transform="perspective("+this.settings.perspective+"px)\n    rotateX("+("X"===this.settings.disabled||"x"===this.settings.disabled?0:e.tiltY)+"deg)\n    rotateY("+("Y"===this.settings.disabled||"y"===this.settings.disabled?0:e.tiltX)+"deg)\n    scale("+this.settings.scale+")",this.settings.shine&&(this.shineElement.style.transition="all 0ms ease",this.shineElement.style.transform="rotate("+-e.angle+"deg) translate3d(-50%, -50%, 0)",this.shineElement.style.opacity=""+this.settings["shine-opacity"]),this.settings.shadow&&(this.element.style.boxShadow=this.boxShadow),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:{X:e.tiltX,Y:e.tiltY}}))}},{key:"shine",value:function(){var e=document.createElement("div");e.classList.add("shine");var t=document.createElement("div");t.classList.add("shine-inner"),e.appendChild(t),this.element.appendChild(e),this.shineElementWrapper=this.element.querySelector(".shine"),this.shineElement=this.element.querySelector(".shine-inner"),Object.assign(this.shineElementWrapper.style,{position:"absolute",top:"0",left:"0",height:"100%",width:"100%",overflow:"hidden"}),Object.assign(this.shineElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:2*this.element.offsetWidth+"px",height:2*this.element.offsetWidth+"px",transform:"rotate(180deg) translate3d(-50%, -50%, 0)","transform-origin":"0% 0%",opacity:"0"})}},{key:"settings",value:function(e){var t={"position-base":"element",reset:!0,shadow:!1,"shadow-save":!1,shine:!1,"shine-opacity":0,"shine-save":!1,max:35,perspective:1e3,scale:1,disabled:null,reverse:!1,transition:!0,easing:"cubic-bezier(.03,.98,.52,.99)"},i={};for(var n in t)if(n in e)i[n]=e[n];else if(this.element.getAttribute("data-"+n)){var s=this.element.getAttribute("data-"+n);try{i[n]=JSON.parse(s)}catch(e){i[n]=s}}else i[n]=t[n];return i}}]),e}();if(window.jQuery){var $=window.jQuery;$.fn.UniversalTilt=function(e){for(var t=0;t<this.length;t++)new UniversalTilt(this[t],e)}}"function"==typeof define&&define.amd?define("UniversalTilt",[],function(){return UniversalTilt}):"undefined"==typeof exports||exports.nodeType||("undefined"!=typeof module&&!module.nodeType&&module.exports&&(exports=module.exports=UniversalTilt),exports.default=UniversalTilt);
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),UniversalTilt=function(){function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,e),t.length>0?this.init(t,i):0!==t.length&&(this.element=t,this.settings=this.settings(i),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform="perspective("+this.settings.perspective+"px)",this.addEventListeners())}return _createClass(e,[{key:"init",value:function(t,i){for(var n=0;n<t.length;n++)new e(t[n],i)}},{key:"addEventListeners",value:function(){var e=this;window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?(this.onDeviceMoveBind=this.onDeviceMove.bind(this),window.addEventListener("devicemotion",this.onDeviceMoveBind)):"element"===this.settings["position-base"]?(this.onMouseMoveBind=this.onMouseMove.bind(this),this.element.addEventListener("mousemove",this.onMouseMoveBind),this.element.addEventListener("mouseleave",function(){return e.onMouseLeave()})):"window"===this.settings["position-base"]&&(this.onMouseMoveBind=this.onMouseMove.bind(this),window.addEventListener("mousemove",this.onMouseMoveBind),window.addEventListener("mouseleave",function(){return e.onMouseLeave()}))}},{key:"onMouseMove",value:function(e){var t=this;this.event=e,this.updateElementPosition(),window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?this.update():window.requestAnimationFrame(function(){return t.update()})}},{key:"onMouseLeave",value:function(){var e=this;window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?this.reset():window.requestAnimationFrame(function(){return e.reset()})}},{key:"onDeviceMove",value:function(e){this.movementEvent=e,this.update(),this.updateElementPosition()}},{key:"reset",value:function(){this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.settings.reset&&(this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX(0deg) rotateY(0deg) scale(1)"),this.settings.transition&&(this.element.style.transition="all 500ms "+this.settings.easing),this.settings.shine&&!this.settings["shine-save"]&&Object.assign(this.shineElement.style,{transition:"all 500ms ease",transform:"rotate(180deg) translate3d(-50%, -50%, 0)",opacity:"0"}),this.settings.shadow&&!this.settings["shadow-save"]&&(this.element.style.boxShadow="0 45px 100px rgba(0, 0, 0, 0)")}},{key:"getValues",value:function(){var e,t;if(window.DeviceMotionEvent&&"ontouchstart"in document.documentElement){e=Math.round(event.accelerationIncludingGravity.x)/6,t=Math.round(event.accelerationIncludingGravity.y)/6;var i;90===window.orientation?(i=1-t,t=(1+e)/2,e=i/2):-90===window.orientation?(i=1+t,t=(1-e)/2,e=i/2):0===window.orientation?(t=(i=1+t)/2,e=(1+e)/2):180===window.orientation&&(t=(i=1-t)/2,e=(1-e)/2)}else"element"===this.settings["position-base"]?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):(e=this.event.clientX/window.innerWidth,t=this.event.clientY/window.innerHeight),e=Math.min(Math.max(e,0),1),t=Math.min(Math.max(t,0),1);var n=(this.settings.max/2-e*this.settings.max).toFixed(2),s=(t*this.settings.max-this.settings.max/2).toFixed(2),o=Math.atan2(.5-e,t-.5)*(180/Math.PI);return{tiltX:this.reverse*n,tiltY:this.reverse*s,percentageX:100*e,percentageY:100*t,angle:o}}},{key:"updateElementPosition",value:function(){var e=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=e.left,this.top=e.top}},{key:"update",value:function(){var e=this.getValues();this.settings.transition&&(this.element.style.transition="all 100ms "+this.settings.easing),this.settings.shadow&&(this.boxShadow="0 45px 100px "+this.settings["shadow-color"]),this.element.style.transform="perspective("+this.settings.perspective+"px)\n     rotateX("+("X"===this.settings.disabled||"x"===this.settings.disabled?0:e.tiltY)+"deg)\n     rotateY("+("Y"===this.settings.disabled||"y"===this.settings.disabled?0:e.tiltX)+"deg)\n     scale("+this.settings.scale+")",this.settings.shine&&Object.assign(this.shineElement.style,{transition:"all 0ms ease",transform:"rotate("+-e.angle+"deg) translate3d(-50%, -50%, 0)",opacity:""+this.settings["shine-opacity"]}),this.settings.shadow&&(this.element.style.boxShadow=this.boxShadow),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:{X:e.tiltX,Y:e.tiltY}}))}},{key:"shine",value:function(){var e=document.createElement("div");e.classList.add("shine");var t=document.createElement("div");t.classList.add("shine-inner"),e.appendChild(t),this.element.appendChild(e),this.shineElementWrapper=this.element.querySelector(".shine"),this.shineElement=this.element.querySelector(".shine-inner"),Object.assign(this.shineElementWrapper.style,{position:"absolute",top:"0",left:"0",height:"100%",width:"100%",overflow:"hidden"}),Object.assign(this.shineElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:2*this.element.offsetWidth+"px",height:2*this.element.offsetWidth+"px",transform:"rotate(180deg) translate3d(-50%, -50%, 0)","transform-origin":"0% 0%",opacity:"0"})}},{key:"settings",value:function(e){var t={"position-base":"element",reset:!0,shadow:!1,"shadow-save":!1,"shadow-color":"rgba(0, 0, 0, 0.4)",shine:!1,"shine-opacity":0,"shine-save":!1,max:24,perspective:600,scale:1,disabled:null,reverse:!1,transition:!0,easing:"cubic-bezier(.03,.98,.52,.99)"},i={};for(var n in t)if(n in e)i[n]=e[n];else if(this.element.getAttribute("data-"+n)){var s=this.element.getAttribute("data-"+n);try{i[n]=JSON.parse(s)}catch(e){i[n]=s}}else i[n]=t[n];return i}}]),e}();if(window.jQuery){var $=window.jQuery;$.fn.universalTilt=function(e){for(var t=0;t<this.length;t++)new UniversalTilt(this[t],e)}}"function"==typeof define&&define.amd?define("UniversalTilt",[],function(){return UniversalTilt}):"undefined"==typeof exports||exports.nodeType||("undefined"!=typeof module&&!module.nodeType&&module.exports&&(exports=module.exports=UniversalTilt),exports.default=UniversalTilt);

dist/universal-tilt.js

 /*!
-* universal-tilt.js v0.5.1
+* universal-tilt.js v1.0 beta 1
 * Created 2018 by Jakub Biesiada
@@ -31,5 +31,3 @@ * Original idea: https://github.com/gijsroge/tilt.js
     // call shine function if shine setting enabled
-    if (this.settings.shine) {
-      this.shine();
-    }
+    if (this.settings.shine) this.shine();
 
@@ -44,3 +42,3 @@ this.element.style.transform = `perspective(${this.settings.perspective}px)`;
     // split parallax elements
-    for (var element = 0; element < elements.length; element++) {
+    for (let element = 0; element < elements.length; element++) {
       new UniversalTilt(elements[element], settings);
@@ -113,22 +111,21 @@ }
 
-    if (this.settings.reset) {
-      this.element.style.transform = `perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg) scale(1)`;
-    }
+    if (this.settings.reset)
+     this.element.style.transform = `perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg) scale(1)`;
 
     // set transition when is enabled
-    if (this.settings.transition) {
-      this.element.style.transition = `all 500ms ${this.settings.easing}`;
-    }
+    if (this.settings.transition)
+     this.element.style.transition = `all 500ms ${this.settings.easing}`;
 
     // reset shine effect
     if (this.settings.shine && !this.settings['shine-save']) {
-      this.shineElement.style.transition = 'all 500ms ease';
-      this.shineElement.style.transform = 'rotate(180deg) translate3d(-50%, -50%, 0)';
-      this.shineElement.style.opacity = '0';
+      Object.assign(this.shineElement.style, {
+        'transition': 'all 500ms ease',
+        'transform': 'rotate(180deg) translate3d(-50%, -50%, 0)',
+        'opacity': '0'
+      });
     }
 
     // reset box shadow
-    if (this.settings.shadow && !this.settings['shadow-save']) {
-      this.element.style.boxShadow = '0 45px 100px rgba(0, 0, 0, 0)';
-    }
+    if (this.settings.shadow && !this.settings['shadow-save'])
+     this.element.style.boxShadow = '0 45px 100px rgba(0, 0, 0, 0)';
   }
@@ -221,24 +218,21 @@
 
-    if (this.settings.transition) {
-      this.element.style.transition = `all 100ms ${this.settings.easing}`;
-    }
+    if (this.settings.transition)
+     this.element.style.transition = `all 100ms ${this.settings.easing}`;
 
-    if (this.settings.shadow) {
-      this.boxShadow = '0 45px 100px rgba(0, 0, 0, 0.4)';
-    }
+    if (this.settings.shadow) this.boxShadow = `0 45px 100px ${this.settings['shadow-color']}`;
 
     this.element.style.transform = `perspective(${this.settings.perspective}px)
-    rotateX(${this.settings.disabled === "X" || this.settings.disabled === "x" ? 0 : values.tiltY}deg)
-    rotateY(${this.settings.disabled === "Y" || this.settings.disabled === "y" ? 0 : values.tiltX}deg)
-    scale(${this.settings.scale})`;
+     rotateX(${this.settings.disabled === "X" || this.settings.disabled === "x" ? 0 : values.tiltY}deg)
+     rotateY(${this.settings.disabled === "Y" || this.settings.disabled === "y" ? 0 : values.tiltX}deg)
+     scale(${this.settings.scale})`;
 
     if (this.settings.shine) {
-      this.shineElement.style.transition = 'all 0ms ease';
-      this.shineElement.style.transform = `rotate(${-values.angle}deg) translate3d(-50%, -50%, 0)`;
-      this.shineElement.style.opacity = `${this.settings["shine-opacity"]}`;
+      Object.assign(this.shineElement.style, {
+        'transition': 'all 0ms ease',
+        'transform': `rotate(${-values.angle}deg) translate3d(-50%, -50%, 0)`,
+        'opacity': `${this.settings["shine-opacity"]}`
+      });
     }
 
-    if (this.settings.shadow) {
-      this.element.style.boxShadow = this.boxShadow;
-    }
+    if (this.settings.shadow) this.element.style.boxShadow = this.boxShadow;
 
@@ -296,19 +290,20 @@ // tilt position change event
       'position-base': 'element', // element or window
-      reset: true,
+      reset: true, // allow/disable element position reset after mouseout
 
-      shadow: false,
-      'shadow-save': false,
+      shadow: false, // show/hide shadow
+      'shadow-save': false, // allow/disable element shadow hide after mouseout (shadow value must be true)
+      'shadow-color': 'rgba(0, 0, 0, 0.4)', // set color of tilt element shadow
 
-      shine: false,
-      'shine-opacity': 0,
-      'shine-save': false,
+      shine: false, // add/remove shine effect on mouseover
+      'shine-opacity': 0, // set shine opacity (0-1)
+      'shine-save': false, // save/reset shine effect on mouseout
 
-      max: 35,
-      perspective: 1000,
-      scale: 1.0,
-      disabled: null,
-      reverse: false,
+      max: 24,
+      perspective: 600, // tilt effect perspective
+      scale: 1.0, // element scale on mouseover
+      disabled: null, // disable axis (X or Y)
+      reverse: false, // reverse tilt effect directory
 
-      transition: true,
-      easing: 'cubic-bezier(.03,.98,.52,.99)'
+      transition: true, // allow/disable tilt effect transition
+      easing: 'cubic-bezier(.03,.98,.52,.99)' // set transition easing
     }
@@ -319,3 +314,3 @@
     // apply settings and get values from data-*
-    for (var setting in defaults) {
+    for (let setting in defaults) {
       if (setting in settings) {
@@ -343,4 +338,4 @@ custom[setting] = settings[setting];
 
-  $.fn.UniversalTilt = function(options) {
-    for (var element = 0; element < this.length; element++) {
+  $.fn.universalTilt = function(options) {
+    for (let element = 0; element < this.length; element++) {
       new UniversalTilt(this[element], options);
@@ -347,0 +342,0 @@ }

dist/universal-tilt.min.js

@@ -1,1 +0,1 @@
-class UniversalTilt{constructor(e,t={}){e.length>0?this.init(e,t):0!==e.length&&(this.element=e,this.settings=this.settings(t),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform=`perspective(${this.settings.perspective}px)`,this.addEventListeners())}init(e,t){for(var i=0;i<e.length;i++)new UniversalTilt(e[i],t)}addEventListeners(){window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?(this.onDeviceMoveBind=this.onDeviceMove.bind(this),window.addEventListener("devicemotion",this.onDeviceMoveBind)):"element"===this.settings["position-base"]?(this.onMouseMoveBind=this.onMouseMove.bind(this),this.element.addEventListener("mousemove",this.onMouseMoveBind),this.element.addEventListener("mouseleave",()=>this.onMouseLeave())):"window"===this.settings["position-base"]&&(this.onMouseMoveBind=this.onMouseMove.bind(this),window.addEventListener("mousemove",this.onMouseMoveBind),window.addEventListener("mouseleave",()=>this.onMouseLeave()))}onMouseMove(e){this.event=e,this.updateElementPosition(),window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?this.update():window.requestAnimationFrame(()=>this.update())}onMouseLeave(){window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?this.reset():window.requestAnimationFrame(()=>this.reset())}onDeviceMove(e){this.movementEvent=e,this.update(),this.updateElementPosition()}reset(){this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.settings.reset&&(this.element.style.transform=`perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg) scale(1)`),this.settings.transition&&(this.element.style.transition=`all 500ms ${this.settings.easing}`),this.settings.shine&&!this.settings["shine-save"]&&(this.shineElement.style.transition="all 500ms ease",this.shineElement.style.transform="rotate(180deg) translate3d(-50%, -50%, 0)",this.shineElement.style.opacity="0"),this.settings.shadow&&!this.settings["shadow-save"]&&(this.element.style.boxShadow="0 45px 100px rgba(0, 0, 0, 0)")}getValues(){var e,t;if(window.DeviceMotionEvent&&"ontouchstart"in document.documentElement){e=Math.round(event.accelerationIncludingGravity.x)/6,t=Math.round(event.accelerationIncludingGravity.y)/6;var i;90===window.orientation?(i=1-t,t=(1+e)/2,e=i/2):-90===window.orientation?(i=1+t,t=(1-e)/2,e=i/2):0===window.orientation?(t=(i=1+t)/2,e=(1+e)/2):180===window.orientation&&(t=(i=1-t)/2,e=(1-e)/2)}else"element"===this.settings["position-base"]?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):(e=this.event.clientX/window.innerWidth,t=this.event.clientY/window.innerHeight),e=Math.min(Math.max(e,0),1),t=Math.min(Math.max(t,0),1);var s=(this.settings.max/2-e*this.settings.max).toFixed(2),n=(t*this.settings.max-this.settings.max/2).toFixed(2),o=Math.atan2(.5-e,t-.5)*(180/Math.PI);return{tiltX:this.reverse*s,tiltY:this.reverse*n,percentageX:100*e,percentageY:100*t,angle:o}}updateElementPosition(){let e=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=e.left,this.top=e.top}update(){let e=this.getValues();this.settings.transition&&(this.element.style.transition=`all 100ms ${this.settings.easing}`),this.settings.shadow&&(this.boxShadow="0 45px 100px rgba(0, 0, 0, 0.4)"),this.element.style.transform=`perspective(${this.settings.perspective}px)\n    rotateX(${"X"===this.settings.disabled||"x"===this.settings.disabled?0:e.tiltY}deg)\n    rotateY(${"Y"===this.settings.disabled||"y"===this.settings.disabled?0:e.tiltX}deg)\n    scale(${this.settings.scale})`,this.settings.shine&&(this.shineElement.style.transition="all 0ms ease",this.shineElement.style.transform=`rotate(${-e.angle}deg) translate3d(-50%, -50%, 0)`,this.shineElement.style.opacity=`${this.settings["shine-opacity"]}`),this.settings.shadow&&(this.element.style.boxShadow=this.boxShadow),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:{X:e.tiltX,Y:e.tiltY}}))}shine(){const e=document.createElement("div");e.classList.add("shine");const t=document.createElement("div");t.classList.add("shine-inner"),e.appendChild(t),this.element.appendChild(e),this.shineElementWrapper=this.element.querySelector(".shine"),this.shineElement=this.element.querySelector(".shine-inner"),Object.assign(this.shineElementWrapper.style,{position:"absolute",top:"0",left:"0",height:"100%",width:"100%",overflow:"hidden"}),Object.assign(this.shineElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:`${2*this.element.offsetWidth}px`,height:`${2*this.element.offsetWidth}px`,transform:"rotate(180deg) translate3d(-50%, -50%, 0)","transform-origin":"0% 0%",opacity:"0"})}settings(e){let t={"position-base":"element",reset:!0,shadow:!1,"shadow-save":!1,shine:!1,"shine-opacity":0,"shine-save":!1,max:35,perspective:1e3,scale:1,disabled:null,reverse:!1,transition:!0,easing:"cubic-bezier(.03,.98,.52,.99)"},i={};for(var s in t)if(s in e)i[s]=e[s];else if(this.element.getAttribute(`data-${s}`)){let e=this.element.getAttribute(`data-${s}`);try{i[s]=JSON.parse(e)}catch(t){i[s]=e}}else i[s]=t[s];return i}}if(window.jQuery){window.jQuery.fn.UniversalTilt=function(e){for(var t=0;t<this.length;t++)new UniversalTilt(this[t],e)}}"function"==typeof define&&define.amd?define("UniversalTilt",[],function(){return UniversalTilt}):"undefined"==typeof exports||exports.nodeType||("undefined"!=typeof module&&!module.nodeType&&module.exports&&(exports=module.exports=UniversalTilt),exports.default=UniversalTilt);
+class UniversalTilt{constructor(e,t={}){e.length>0?this.init(e,t):0!==e.length&&(this.element=e,this.settings=this.settings(t),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform=`perspective(${this.settings.perspective}px)`,this.addEventListeners())}init(e,t){for(let i=0;i<e.length;i++)new UniversalTilt(e[i],t)}addEventListeners(){window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?(this.onDeviceMoveBind=this.onDeviceMove.bind(this),window.addEventListener("devicemotion",this.onDeviceMoveBind)):"element"===this.settings["position-base"]?(this.onMouseMoveBind=this.onMouseMove.bind(this),this.element.addEventListener("mousemove",this.onMouseMoveBind),this.element.addEventListener("mouseleave",()=>this.onMouseLeave())):"window"===this.settings["position-base"]&&(this.onMouseMoveBind=this.onMouseMove.bind(this),window.addEventListener("mousemove",this.onMouseMoveBind),window.addEventListener("mouseleave",()=>this.onMouseLeave()))}onMouseMove(e){this.event=e,this.updateElementPosition(),window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?this.update():window.requestAnimationFrame(()=>this.update())}onMouseLeave(){window.DeviceMotionEvent&&"ontouchstart"in document.documentElement?this.reset():window.requestAnimationFrame(()=>this.reset())}onDeviceMove(e){this.movementEvent=e,this.update(),this.updateElementPosition()}reset(){this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.settings.reset&&(this.element.style.transform=`perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg) scale(1)`),this.settings.transition&&(this.element.style.transition=`all 500ms ${this.settings.easing}`),this.settings.shine&&!this.settings["shine-save"]&&Object.assign(this.shineElement.style,{transition:"all 500ms ease",transform:"rotate(180deg) translate3d(-50%, -50%, 0)",opacity:"0"}),this.settings.shadow&&!this.settings["shadow-save"]&&(this.element.style.boxShadow="0 45px 100px rgba(0, 0, 0, 0)")}getValues(){var e,t;if(window.DeviceMotionEvent&&"ontouchstart"in document.documentElement){e=Math.round(event.accelerationIncludingGravity.x)/6,t=Math.round(event.accelerationIncludingGravity.y)/6;var i;90===window.orientation?(i=1-t,t=(1+e)/2,e=i/2):-90===window.orientation?(i=1+t,t=(1-e)/2,e=i/2):0===window.orientation?(t=(i=1+t)/2,e=(1+e)/2):180===window.orientation&&(t=(i=1-t)/2,e=(1-e)/2)}else"element"===this.settings["position-base"]?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):(e=this.event.clientX/window.innerWidth,t=this.event.clientY/window.innerHeight),e=Math.min(Math.max(e,0),1),t=Math.min(Math.max(t,0),1);var s=(this.settings.max/2-e*this.settings.max).toFixed(2),n=(t*this.settings.max-this.settings.max/2).toFixed(2),o=Math.atan2(.5-e,t-.5)*(180/Math.PI);return{tiltX:this.reverse*s,tiltY:this.reverse*n,percentageX:100*e,percentageY:100*t,angle:o}}updateElementPosition(){let e=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=e.left,this.top=e.top}update(){let e=this.getValues();this.settings.transition&&(this.element.style.transition=`all 100ms ${this.settings.easing}`),this.settings.shadow&&(this.boxShadow=`0 45px 100px ${this.settings["shadow-color"]}`),this.element.style.transform=`perspective(${this.settings.perspective}px)\n     rotateX(${"X"===this.settings.disabled||"x"===this.settings.disabled?0:e.tiltY}deg)\n     rotateY(${"Y"===this.settings.disabled||"y"===this.settings.disabled?0:e.tiltX}deg)\n     scale(${this.settings.scale})`,this.settings.shine&&Object.assign(this.shineElement.style,{transition:"all 0ms ease",transform:`rotate(${-e.angle}deg) translate3d(-50%, -50%, 0)`,opacity:`${this.settings["shine-opacity"]}`}),this.settings.shadow&&(this.element.style.boxShadow=this.boxShadow),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:{X:e.tiltX,Y:e.tiltY}}))}shine(){const e=document.createElement("div");e.classList.add("shine");const t=document.createElement("div");t.classList.add("shine-inner"),e.appendChild(t),this.element.appendChild(e),this.shineElementWrapper=this.element.querySelector(".shine"),this.shineElement=this.element.querySelector(".shine-inner"),Object.assign(this.shineElementWrapper.style,{position:"absolute",top:"0",left:"0",height:"100%",width:"100%",overflow:"hidden"}),Object.assign(this.shineElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:`${2*this.element.offsetWidth}px`,height:`${2*this.element.offsetWidth}px`,transform:"rotate(180deg) translate3d(-50%, -50%, 0)","transform-origin":"0% 0%",opacity:"0"})}settings(e){let t={"position-base":"element",reset:!0,shadow:!1,"shadow-save":!1,"shadow-color":"rgba(0, 0, 0, 0.4)",shine:!1,"shine-opacity":0,"shine-save":!1,max:24,perspective:600,scale:1,disabled:null,reverse:!1,transition:!0,easing:"cubic-bezier(.03,.98,.52,.99)"},i={};for(let s in t)if(s in e)i[s]=e[s];else if(this.element.getAttribute(`data-${s}`)){let e=this.element.getAttribute(`data-${s}`);try{i[s]=JSON.parse(e)}catch(t){i[s]=e}}else i[s]=t[s];return i}}if(window.jQuery){window.jQuery.fn.universalTilt=function(e){for(let t=0;t<this.length;t++)new UniversalTilt(this[t],e)}}"function"==typeof define&&define.amd?define("UniversalTilt",[],function(){return UniversalTilt}):"undefined"==typeof exports||exports.nodeType||("undefined"!=typeof module&&!module.nodeType&&module.exports&&(exports=module.exports=UniversalTilt),exports.default=UniversalTilt);

package.json

 {
   "name": "universal-tilt.js",
-  "version": "0.5.1",
+  "version": "1.0.0-beta.1",
   "description": "JavaScript & jQuery parallax tilt effect",
@@ -26,3 +26,4 @@ "main": "dist/universal-tilt.js",
   "devDependencies": {
-    "babel-preset-env": "^1.6.1",
+    "babel-cli": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
     "gulp-babel": "^7.0.1",
@@ -29,0 +30,0 @@ "gulp-sass": "^3.1.0"

README.md

 # universal-tilt.js
 
-JavaScript & jQuery elements movement.
-The plugin is based on:
+JavaScript & jQuery elements movement plugin based on:
 
@@ -10,6 +9,3 @@ **[Tilt.js](https://gijsroge.github.io/tilt.js/)** by **[Gijs Rogé](https://twitter.com/GijsRoge)** and **[vanilla-tilt.js](https://micku7zu.github.io/vanilla-tilt.js/index.html)** by **[Șandor Sergiu](https://github.com/micku7zu)**
 
-
-
 ## How to use?
-
 Place the following code in the .js file and customize the prameters:
@@ -20,4 +16,4 @@
 ```
-var tilts = document.querySelectorAll('.tilt');
-var liveTilt = new UniversalTilt(tilts, {});
+const tilts = document.querySelectorAll('.tilt');
+const liveTilt = new UniversalTilt(tilts);
 ```
@@ -28,12 +24,6 @@
 ```
-$('.tilt').UniversalTilt();
+$('.tilt').universalTilt();
 ```
 
-## Questions & Answers
-
-Does the plugin require jQuery?   
-**NO**
-
 ## License
-
 This project is licensed under the MIT License

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37577

increased by3.17%

Worsened metrics

Dev dependency count

4

increased by33.33%

Lines of code

600

decreased by-2.28%

Number of lines in readme file

27

decreased by-27.03%

No dependency changes