diff --git a/.gitignore b/.gitignore
index 485dee6..58476ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,4 @@
+node_modules
+lib
.idea
+.tern-port
diff --git a/README.md b/README.md
index 35efc20..17666c2 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,17 @@
# vanilla-tilt.js
+
+[](https://badge.fury.io/js/vanilla-tilt)
+
A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https://github.com/gijsroge/tilt.js).
-[View landing page (demos)](https://micku7zu.github.io/vanilla-tilt.js/landing/index.html)
+[View landing page (demos)](https://micku7zu.github.io/vanilla-tilt.js/)
### Usage
```html
+
+
@@ -14,17 +19,34 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
```
+If you want to use this library in IE, you need to include a CustomEvent polyfill: https://github.com/micku7zu/vanilla-tilt.js/issues/49#issuecomment-482711876 or maybe consider the [jQuery version](https://github.com/gijsroge/tilt.js).
### Options
```js
{
- max: 35, // max tilt rotation (degrees)
- perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
- scale: 1, // 2 = 200%, 1.5 = 150%, etc..
- 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.
- easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
+ reverse: false, // reverse the tilt direction
+ max: 15, // max tilt rotation (degrees)
+ startX: 0, // the starting tilt on the X axis, in degrees.
+ startY: 0, // the starting tilt on the Y axis, in degrees.
+ perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
+ scale: 1, // 2 = 200%, 1.5 = 150%, etc..
+ speed: 300, // Speed of the enter/exit transition
+ transition: true, // Set a transition on enter/exit.
+ axis: null, // What axis should be enabled. Can be "x" or "y".
+ reset: true, // If the tilt effect has to be reset on exit.
+ "reset-to-start": true, // Whether the exit reset will go to [0,0] (default) or [startX, startY]
+ easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
+ 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 an HTML-element that will be listening to 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;
+ gyroscopeSamples: 10 // How many gyroscope moves to decide the starting position.
}
```
@@ -32,7 +54,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
@@ -48,19 +70,36 @@ element.vanillaTilt.getValues();
// Reset instance
element.vanillaTilt.reset();
+
+// It also supports NodeList
+const elements = document.querySelectorAll(".js-tilt");
+VanillaTilt.init(elements);
```
### Install
You can copy and include any of the following file:
-TO DO (automatically build those):
+* [dist/vanilla-tilt.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.js) ~ 15kb
+* [dist/vanilla-tilt.min.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.min.js) ~ 8.5kb
+* [dist/vanilla-tilt.babel.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.js) ~ 16.5kb
+* [dist/vanilla-tilt.babel.min.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.min.js) ~ 9.5kb
+
+#### NPM
+
+Also available on npm https://www.npmjs.com/package/vanilla-tilt
+
+```
+npm install vanilla-tilt
+```
+
+Import it using
-* dest/vanilla-tilt.js ~ 6kb
-* dest/vanilla-tilt.min.js ~ 3.5kb
-* dest/vanilla-tilt.babel.js ~ 8.5kb
-* dest/vanilla-tilt.babel.min.js ~ 4.3kb
+```
+import VanillaTilt from 'vanilla-tilt';
+```
-in your webiste.
+### Known issues
+- [Getting weird rendering issues on Safari](https://github.com/micku7zu/vanilla-tilt.js/issues/22)
### Credits
@@ -68,6 +107,24 @@ Original library: [Tilt.js](http://gijsroge.github.io/tilt.js/)
Original library author: [Gijs Rogé](https://twitter.com/GijsRoge)
+#### Contributors
+
+- [Livio Brunner](https://github.com/BrunnerLivio) <contact@brunnerliv.io> (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)
+- [Sander Moolin](https://github.com/SaFrMo)
+- [rrroyal](https://github.com/rrroyal) (Whole document mouse events listening)
+- [Andžs Pilskalns](https://github.com/Pilskalns) ("reset-to-start" feature)
+
+### Other projects
+
+#### [Quick Cursor: One-Handed mode](https://play.google.com/store/apps/details?id=com.quickcursor) (Android app)
+Play Store link: https://play.google.com/store/apps/details?id=com.quickcursor
+
+### Buy me a beer 🍻
+If you want to thank me for vanilla-tilt.js or Quick Cursor Android app, you can [donate on PayPal](https://www.paypal.me/micku7zu?locale.x=en_US): https://www.paypal.me/micku7zu?locale.x=en_US
+
### License
-MIT License
\ No newline at end of file
+MIT License
diff --git a/dest/vanilla-tilt.babel.js b/dest/vanilla-tilt.babel.js
deleted file mode 100644
index 4e86b64..0000000
--- a/dest/vanilla-tilt.babel.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/**
- * Created by Șandor Sergiu (micku7zu) on 1/27/2017.
- * Original idea: https://github.com/gijsroge/tilt.js
- * MIT License.
- * Version 1.0.1
- */
-"use strict";
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-(function (undefined) {
- var VanillaTilt = function () {
- function VanillaTilt(element) {
- var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
- _classCallCheck(this, VanillaTilt);
-
- if (!(element instanceof Node)) {
- throw "Can't initialize VanillaTilt because " + element + " is not a Node.";
- }
-
- this.width = null;
- this.height = null;
- this.left = null;
- this.top = null;
- this.transitionTimeout = null;
- this.updateCall = null;
-
- this.updateBind = this.update.bind(this);
-
- this.element = element;
- this.settings = this.extendSettings(settings);
-
- this.addEventListeners();
- }
-
- _createClass(VanillaTilt, [{
- key: "addEventListeners",
- value: function addEventListeners() {
- this.onMouseEnterBind = this.onMouseEnter.bind(this);
- this.onMouseMoveBind = this.onMouseMove.bind(this);
- this.onMouseLeaveBind = this.onMouseLeave.bind(this);
-
- this.element.addEventListener("mouseenter", this.onMouseEnterBind);
- this.element.addEventListener("mousemove", this.onMouseMoveBind);
- this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
- }
- }, {
- key: "removeEventListeners",
- value: function removeEventListeners() {
- this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
- this.element.removeEventListener("mousemove", this.onMouseMoveBind);
- this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
- }
- }, {
- key: "destroy",
- value: function destroy() {
- this.removeEventListeners();
- this.element.vanillaTilt = null;
- delete this.element.vanillaTilt;
-
- this.element = null;
- }
- }, {
- key: "onMouseEnter",
- value: function onMouseEnter(event) {
- this.updateElementPosition();
- this.element.style.willChange = "transform";
- this.setTransition();
- }
- }, {
- key: "onMouseMove",
- value: function onMouseMove(event) {
- if (this.updateCall !== null) {
- cancelAnimationFrame(this.updateCall);
- }
-
- this.event = event;
- this.updateCall = requestAnimationFrame(this.updateBind);
- }
- }, {
- key: "onMouseLeave",
- value: function onMouseLeave(event) {
- this.setTransition();
-
- if (this.settings.reset) {
- this.reset();
- }
- }
- }, {
- key: "reset",
- value: function reset() {
- var _this = this;
-
- requestAnimationFrame(function () {
- _this.event = {
- pageX: _this.left + _this.width / 2,
- pageY: _this.top + _this.height / 2
- };
-
- _this.element.style.transform = "perspective(" + _this.settings.perspective + "px) " + "rotateX(0deg) " + "rotateY(0deg) " + "scale3d(1, 1, 1)";
- });
- }
- }, {
- key: "getValues",
- value: function getValues() {
- 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);
-
- var tiltX = (this.settings.max / 2 - x * this.settings.max).toFixed(2);
- var tiltY = (y * this.settings.max - this.settings.max / 2).toFixed(2);
-
- return {
- tiltX: tiltX,
- tiltY: tiltY,
- percentageX: x * 100,
- percentageY: y * 100
- };
- }
- }, {
- key: "updateElementPosition",
- value: function updateElementPosition() {
- var rect = this.element.getBoundingClientRect();
-
- this.width = this.element.offsetWidth;
- this.height = this.element.offsetHeight;
- this.left = rect.left;
- this.top = rect.top;
- }
- }, {
- key: "update",
- value: function update() {
- var values = this.getValues();
-
- this.element.style.transform = "perspective(" + this.settings.perspective + "px) " + "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " + "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " + "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
-
- this.element.dispatchEvent(new CustomEvent("tiltChange", {
- "detail": values
- }));
-
- this.updateCall = null;
- }
- }, {
- key: "setTransition",
- value: function setTransition() {
- var _this2 = this;
-
- clearTimeout(this.transitionTimeout);
- this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
- this.transitionTimeout = setTimeout(function () {
- return _this2.element.style.transition = "";
- }, this.settings.speed);
- }
- }, {
- key: "extendSettings",
- value: function extendSettings(settings) {
- var defaultSettings = {
- max: 35,
- perspective: 1000,
- easing: "cubic-bezier(.03,.98,.52,.99)",
- scale: "1",
- speed: "300",
- transition: true,
- axis: null,
- reset: true
- };
-
- var newSettings = {};
-
- for (var property in defaultSettings) {
- if (property in settings) {
- newSettings[property] = settings[property];
- } else if (this.element.hasAttribute("data-tilt-" + property)) {
- var attribute = this.element.getAttribute("data-tilt-" + property);
- try {
- newSettings[property] = JSON.parse(attribute);
- } catch (e) {
- newSettings[property] = attribute;
- }
- } else {
- newSettings[property] = defaultSettings[property];
- }
- }
-
- return newSettings;
- }
- }], [{
- key: "init",
- value: function init(elements, settings) {
- if (elements instanceof Node) {
- elements = [elements];
- }
-
- if (elements instanceof NodeList) {
- elements = [].slice.call(elements);
- }
-
- if (!(elements instanceof Array)) {
- return;
- }
-
- elements.forEach(function (element) {
- if (!("vanillaTilt" in element)) {
- element.vanillaTilt = new VanillaTilt(element, settings);
- }
- });
- }
- }]);
-
- return VanillaTilt;
- }();
-
- /* expose the class to window */
-
-
- window.VanillaTilt = VanillaTilt;
-
- /**
- * Auto load
- */
- VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
-})();
\ No newline at end of file
diff --git a/dest/vanilla-tilt.babel.min.js b/dest/vanilla-tilt.babel.min.js
deleted file mode 100644
index 262d6f7..0000000
--- a/dest/vanilla-tilt.babel.min.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Created by Șandor Sergiu (micku7zu) on 1/27/2017.
- * Original idea: https://github.com/gijsroge/tilt.js
- * MIT License.
- * Version 1.0.1
- */
-"use strict";var _createClass=function(){function a(b,c){for(var f,d=0;d {
- this.event = {
- pageX: this.left + this.width / 2,
- pageY: this.top + this.height / 2
- };
-
- this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
- "rotateX(0deg) " +
- "rotateY(0deg) " +
- "scale3d(1, 1, 1)";
- });
- }
-
- getValues() {
- let x = (this.event.clientX - this.left) / this.width;
- let y = (this.event.clientY - this.top) / this.height;
-
- x = Math.min(Math.max(x, 0), 1);
- y = Math.min(Math.max(y, 0), 1);
-
- let tiltX = (this.settings.max / 2 - x * this.settings.max).toFixed(2);
- let tiltY = (y * this.settings.max - this.settings.max / 2).toFixed(2);
-
- return {
- tiltX: tiltX,
- tiltY: tiltY,
- percentageX: x * 100,
- percentageY: y * 100
- };
- }
-
- updateElementPosition() {
- let rect = this.element.getBoundingClientRect();
-
- this.width = this.element.offsetWidth;
- this.height = this.element.offsetHeight;
- this.left = rect.left;
- this.top = rect.top;
- }
-
- update() {
- let values = this.getValues();
-
- this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
- "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " +
- "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
- "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
-
-
- this.element.dispatchEvent(new CustomEvent("tiltChange", {
- "detail": values
- }));
-
- this.updateCall = null;
- }
-
- setTransition() {
- clearTimeout(this.transitionTimeout);
- this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
- this.transitionTimeout = setTimeout(() => this.element.style.transition = "", this.settings.speed);
- }
-
- extendSettings(settings) {
- let defaultSettings = {
- max: 35,
- perspective: 1000,
- easing: "cubic-bezier(.03,.98,.52,.99)",
- scale: "1",
- speed: "300",
- transition: true,
- axis: null,
- reset: true
- };
-
- let newSettings = {};
-
- for (var property in defaultSettings) {
- if (property in settings) {
- newSettings[property] = settings[property];
- } else if (this.element.hasAttribute("data-tilt-" + property)) {
- let attribute = this.element.getAttribute("data-tilt-" + property);
- try {
- newSettings[property] = JSON.parse(attribute);
- } catch (e) {
- newSettings[property] = attribute;
- }
-
- } else {
- newSettings[property] = defaultSettings[property];
- }
- }
-
- return newSettings;
- }
-
- static init(elements, settings) {
- if (elements instanceof Node) {
- elements = [elements];
- }
-
- if (elements instanceof NodeList) {
- elements = [].slice.call(elements);
- }
-
- if (!(elements instanceof Array)) {
- return;
- }
-
- elements.forEach((element) => {
- if (!("vanillaTilt" in element)) {
- element.vanillaTilt = new VanillaTilt(element, settings);
- }
- });
- }
- }
-
- /* expose the class to window */
- window.VanillaTilt = VanillaTilt;
-
- /**
- * Auto load
- */
- VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
-})();
\ No newline at end of file
diff --git a/dest/vanilla-tilt.min.js b/dest/vanilla-tilt.min.js
deleted file mode 100644
index cb8b34f..0000000
--- a/dest/vanilla-tilt.min.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Created by Șandor Sergiu (micku7zu) on 1/27/2017.
- * Original idea: https://github.com/gijsroge/tilt.js
- * MIT License.
- * Version 1.0.1
- */
-"use strict";(function(){class b{constructor(c,d={}){if(!(c instanceof Node))throw"Can't initialize VanillaTilt because "+c+" is not a Node.";this.width=null,this.height=null,this.left=null,this.top=null,this.transitionTimeout=null,this.updateCall=null,this.updateBind=this.update.bind(this),this.element=c,this.settings=this.extendSettings(d),this.addEventListeners()}addEventListeners(){this.onMouseEnterBind=this.onMouseEnter.bind(this),this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseLeaveBind=this.onMouseLeave.bind(this),this.element.addEventListener("mouseenter",this.onMouseEnterBind),this.element.addEventListener("mousemove",this.onMouseMoveBind),this.element.addEventListener("mouseleave",this.onMouseLeaveBind)}removeEventListeners(){this.element.removeEventListener("mouseenter",this.onMouseEnterBind),this.element.removeEventListener("mousemove",this.onMouseMoveBind),this.element.removeEventListener("mouseleave",this.onMouseLeaveBind)}destroy(){this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null}onMouseEnter(){this.updateElementPosition(),this.element.style.willChange="transform",this.setTransition()}onMouseMove(c){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=c,this.updateCall=requestAnimationFrame(this.updateBind)}onMouseLeave(){this.setTransition(),this.settings.reset&&this.reset()}reset(){requestAnimationFrame(()=>{this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"})}getValues(){let c=(this.event.clientX-this.left)/this.width,d=(this.event.clientY-this.top)/this.height;c=Math.min(Math.max(c,0),1),d=Math.min(Math.max(d,0),1);let f=(this.settings.max/2-c*this.settings.max).toFixed(2),g=(d*this.settings.max-this.settings.max/2).toFixed(2);return{tiltX:f,tiltY:g,percentageX:100*c,percentageY:100*d}}updateElementPosition(){let c=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=c.left,this.top=c.top}update(){let c=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:c.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:c.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:c})),this.updateCall=null}setTransition(){clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.transitionTimeout=setTimeout(()=>this.element.style.transition="",this.settings.speed)}extendSettings(c){let d={max:35,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:"1",speed:"300",transition:!0,axis:null,reset:!0},f={};for(var g in d)if(g in c)f[g]=c[g];else if(this.element.hasAttribute("data-tilt-"+g)){let h=this.element.getAttribute("data-tilt-"+g);try{f[g]=JSON.parse(h)}catch(i){f[g]=h}}else f[g]=d[g];return f}static init(c,d){c instanceof Node&&(c=[c]),c instanceof NodeList&&(c=[].slice.call(c));c instanceof Array&&c.forEach(f=>{"vanillaTilt"in f||(f.vanillaTilt=new b(f,d))})}}window.VanillaTilt=b,b.init(document.querySelectorAll("[data-tilt]"))})();
\ No newline at end of file
diff --git a/index.html b/index.html
index f224cb3..572ad8d 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,414 @@
-
+
+
+ Vanilla-tilt.js
+
+
+
+
-
+
+
-
\ No newline at end of file
+