deblan-mirror/vanilla-tilt.js
deblan-mirror/vanilla-tilt.js
1
0
Fork 0
mirror of https://github.com/micku7zu/vanilla-tilt.js synced 2024-06-15 20:14:59 +02:00
Code Issues Projects Releases Wiki Activity

bundle also minified versions

Browse source
This commit is contained in:
Sönke Kluth 2017-01-29 21:03:03 +01:00
parent f1088a0a00
commit 03f9a1dadb
8 changed files with 463 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
build.js
View file

@ -3,94 +3,115 @@ import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import babelrc from 'babelrc-rollup';
import { minify } from 'uglify-js';
import fs from 'fs';
const pkg = require('./package.json');
const external = !!pkg.dependencies ? Object.keys(pkg.dependencies) : [];
/*
create the lib for publishing to npm
*/
rollup({
entry: 'src/vanilla-tilt.js',
plugins: [
nodeResolve({
module: true,
jsnext: true,
main: true,
})
],
external: external
})
.then(bundle => bundle.write({
dest: pkg.module,
format: 'es'
})).catch(err => console.log(err.stack));
rollup({
entry: 'src/vanilla-tilt.js',
plugins: [
nodeResolve({
module: true,
jsnext: true,
main: true,
}),
babel(babelrc()),
commonjs()
],
external: external
})
.then(bundle => bundle.write({
dest: pkg.main,
format: 'cjs'
})).catch(err => console.log(err.stack));
/*
create dist for using as script in html
*/
rollup({
entry: 'src/vanilla-tilt.js',
plugins: [
nodeResolve({
module: true,
jsnext: true,
main: true,
})
],
external: external
})
.then((bundle) => {
bundle.write({
moduleName: 'VanillaTilt',
format: 'iife',
dest: pkg.dist,
})
.then(() => {
const code = minify(pkg.dist, {
mangle: { except: ['VanillaTilt'] }
}).code;
fs.writeFileSync(pkg.dist.replace('.js', '.min.js'), code);
return bundle;
})
}).catch(err => console.log(err.stack));
rollup({
entry: 'src/vanilla-tilt.js',
plugins: [
nodeResolve({
module: true,
jsnext: true,
main: true,
extensions: ['.js', '.json'],
preferBuiltins: false
})
]
}).then(bundle => bundle.write({
dest: pkg.module,
format: 'es'
}));
rollup({
entry: 'src/vanilla-tilt.js',
plugins: [
nodeResolve({
jsnext: true,
main: true
}),
babel(babelrc()),
commonjs()
]
}).then(bundle => bundle.write({
dest: pkg.main,
format: 'cjs'
})).catch(err => console.log(err.stack));
rollup({
entry: 'src/vanilla-tilt.js',
plugins: [
nodeResolve({
jsnext: true,
main: true
}),
babel(babelrc()),
commonjs()
commonjs(),
],
external: external
}).then(bundle => bundle.write({
dest: pkg.dist,
moduleName: 'VanillaTilt',
format: 'iife'
})).catch(err => console.log(err.stack));
})
.then((bundle) => {
const dest = pkg.dist.replace('.js', '.babel.js');
bundle.write({
moduleName: 'VanillaTilt',
format: 'iife',
dest:dest,
})
.then(() => {
const code = minify(dest, {
mangle: { except: ['VanillaTilt'] }
}).code;
fs.writeFileSync(dest.replace('.js', '.min.js'), code);
return bundle;
})
// import babel from 'rollup-plugin-babel';
// import babelrc from 'babelrc-rollup';
// // import istanbul from 'rollup-plugin-istanbul';
// let pkg = require('./package.json');
// let external = !!pkg.dependencies ? Object.keys(pkg.dependencies) : [];
// export default {
// entry: 'src/vanilla-tilt.js',
// plugins: [
// // babel(babelrc()),
// // istanbul({
// // exclude: ['test/**/*', 'node_modules/**/*']
// // })
// ],
// external: external,
// // external: external,
// targets: [
// {
// dest: pkg.dist,
// format: 'iife',
// moduleName: 'VanillaTilt',
// sourceMap: false
// },
// {
// dest: pkg.module,
// format: 'es',
// sourceMap: false
// }
// ]
// };
})
.catch(err => console.log(err.stack));

211
dist/vanilla-tilt.babel.js vendored Normal file
View file

@ -0,0 +1,211 @@
var VanillaTilt = (function () {
'use strict';
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
/**
* Created by micku7zu on 1/27/2017.
* Original idea: http://gijsroge.github.io/tilt.js/
* MIT License.
* Version 1.0.0
*/
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();
}
VanillaTilt.prototype.addEventListeners = 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);
};
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
this.element.removeEventListener("mousemove", this.onMouseMoveBind);
this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
};
VanillaTilt.prototype.destroy = function destroy() {
this.removeEventListeners();
this.element.vanillaTilt = null;
delete this.element.vanillaTilt;
this.element = null;
};
VanillaTilt.prototype.onMouseEnter = function onMouseEnter(event) {
this.width = this.element.offsetWidth;
this.height = this.element.offsetHeight;
this.left = this.element.offsetLeft;
this.top = this.element.offsetTop;
this.element.style.willChange = "transform";
this.setTransition();
};
VanillaTilt.prototype.onMouseMove = function onMouseMove(event) {
if (this.updateCall !== null) {
cancelAnimationFrame(this.updateCall);
}
this.event = event;
this.updateCall = requestAnimationFrame(this.updateBind);
};
VanillaTilt.prototype.onMouseLeave = function onMouseLeave(event) {
this.setTransition();
if (this.settings.reset) {
this.reset();
}
};
VanillaTilt.prototype.reset = 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)";
});
};
VanillaTilt.prototype.getValues = function getValues() {
var x = (this.event.pageX - this.left) / this.width;
var y = (this.event.pageY - 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
};
};
VanillaTilt.prototype.update = 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;
};
VanillaTilt.prototype.setTransition = 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);
};
VanillaTilt.prototype.extendSettings = function extendSettings(settings) {
var defaultSettings = {
max: 20,
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;
};
VanillaTilt.init = function init(elements, settings) {
if (typeof elements === 'string') {
elements = document.querySelectorAll(elements);
}
if (elements instanceof Node) {
elements = [elements];
} else 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;
}();
if (typeof document !== 'undefined') {
window.VanillaTilt = VanillaTilt;
VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
}
module.exports = exports["default"];
return VanillaTilt;
}());

1
dist/vanilla-tilt.babel.min.js vendored Normal file
View file

@ -0,0 +1 @@
var VanillaTilt=function(){"use strict";var t=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},VanillaTilt=function(){function VanillaTilt(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(t(this,VanillaTilt),!(e instanceof Node))throw"Can't initialize VanillaTilt because "+e+" 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=e,this.settings=this.extendSettings(i),this.addEventListeners()}return VanillaTilt.prototype.addEventListeners=function(){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)},VanillaTilt.prototype.removeEventListeners=function(){this.element.removeEventListener("mouseenter",this.onMouseEnterBind),this.element.removeEventListener("mousemove",this.onMouseMoveBind),this.element.removeEventListener("mouseleave",this.onMouseLeaveBind)},VanillaTilt.prototype.destroy=function(){this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null},VanillaTilt.prototype.onMouseEnter=function(t){this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=this.element.offsetLeft,this.top=this.element.offsetTop,this.element.style.willChange="transform",this.setTransition()},VanillaTilt.prototype.onMouseMove=function(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)},VanillaTilt.prototype.onMouseLeave=function(t){this.setTransition(),this.settings.reset&&this.reset()},VanillaTilt.prototype.reset=function(){var t=this;requestAnimationFrame(function(){t.event={pageX:t.left+t.width/2,pageY:t.top+t.height/2},t.element.style.transform="perspective("+t.settings.perspective+"px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"})},VanillaTilt.prototype.getValues=function(){var t=(this.event.pageX-this.left)/this.width,e=(this.event.pageY-this.top)/this.height;t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1);var i=(this.settings.max/2-t*this.settings.max).toFixed(2),n=(e*this.settings.max-this.settings.max/2).toFixed(2);return{tiltX:i,tiltY:n,percentageX:100*t,percentageY:100*e}},VanillaTilt.prototype.update=function(){var t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),this.updateCall=null},VanillaTilt.prototype.setTransition=function(){var t=this;clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.transitionTimeout=setTimeout(function(){return t.element.style.transition=""},this.settings.speed)},VanillaTilt.prototype.extendSettings=function(t){var e={max:20,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:"1",speed:"300",transition:!0,axis:null,reset:!0},i={};for(var n in e)if(n in t)i[n]=t[n];else if(this.element.hasAttribute("data-tilt-"+n)){var s=this.element.getAttribute("data-tilt-"+n);try{i[n]=JSON.parse(s)}catch(t){i[n]=s}}else i[n]=e[n];return i},VanillaTilt.init=function(t,e){"string"==typeof t&&(t=document.querySelectorAll(t)),t instanceof Node?t=[t]:t instanceof NodeList&&(t=[].slice.call(t)),t instanceof Array&&t.forEach(function(t){"vanillaTilt"in t||(t.vanillaTilt=new VanillaTilt(t,e))})},VanillaTilt}();return"undefined"!=typeof document&&(window.VanillaTilt=VanillaTilt,VanillaTilt.init(document.querySelectorAll("[data-tilt]"))),module.exports=exports.default,VanillaTilt}();

119
dist/vanilla-tilt.js vendored
View file

@ -1,12 +1,6 @@
var VanillaTilt = (function () {
'use strict';
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
/**
* Created by micku7zu on 1/27/2017.
* Original idea: http://gijsroge.github.io/tilt.js/
@ -14,13 +8,10 @@ var classCallCheck = function (instance, Constructor) {
* Version 1.0.0
*/
var VanillaTilt = function () {
function VanillaTilt(element) {
var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
classCallCheck(this, VanillaTilt);
class VanillaTilt {
constructor(element, settings = {}) {
if (!(element instanceof Node)) {
throw "Can't initialize VanillaTilt because " + element + " is not a Node.";
throw ("Can't initialize VanillaTilt because " + element + " is not a Node.");
}
this.width = null;
@ -38,7 +29,7 @@ var VanillaTilt = function () {
this.addEventListeners();
}
VanillaTilt.prototype.addEventListeners = function addEventListeners() {
addEventListeners() {
this.onMouseEnterBind = this.onMouseEnter.bind(this);
this.onMouseMoveBind = this.onMouseMove.bind(this);
this.onMouseLeaveBind = this.onMouseLeave.bind(this);
@ -46,23 +37,23 @@ var VanillaTilt = function () {
this.element.addEventListener("mouseenter", this.onMouseEnterBind);
this.element.addEventListener("mousemove", this.onMouseMoveBind);
this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
};
}
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
removeEventListeners() {
this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
this.element.removeEventListener("mousemove", this.onMouseMoveBind);
this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
};
}
VanillaTilt.prototype.destroy = function destroy() {
destroy() {
this.removeEventListeners();
this.element.vanillaTilt = null;
delete this.element.vanillaTilt;
this.element = null;
};
}
VanillaTilt.prototype.onMouseEnter = function onMouseEnter(event) {
onMouseEnter(event) {
this.width = this.element.offsetWidth;
this.height = this.element.offsetHeight;
this.left = this.element.offsetLeft;
@ -70,47 +61,48 @@ var VanillaTilt = function () {
this.element.style.willChange = "transform";
this.setTransition();
};
}
VanillaTilt.prototype.onMouseMove = function onMouseMove(event) {
onMouseMove(event) {
if (this.updateCall !== null) {
cancelAnimationFrame(this.updateCall);
}
this.event = event;
this.updateCall = requestAnimationFrame(this.updateBind);
};
}
VanillaTilt.prototype.onMouseLeave = function onMouseLeave(event) {
onMouseLeave(event) {
this.setTransition();
if (this.settings.reset) {
this.reset();
}
};
}
VanillaTilt.prototype.reset = function reset() {
var _this = this;
requestAnimationFrame(function () {
_this.event = {
pageX: _this.left + _this.width / 2,
pageY: _this.top + _this.height / 2
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)";
this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
"rotateX(0deg) " +
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
});
};
}
VanillaTilt.prototype.getValues = function getValues() {
var x = (this.event.pageX - this.left) / this.width;
var y = (this.event.pageY - this.top) / this.height;
getValues() {
let x = (this.event.pageX - this.left) / this.width;
let y = (this.event.pageY - 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);
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,
@ -118,32 +110,32 @@ var VanillaTilt = function () {
percentageX: x * 100,
percentageY: y * 100
};
};
}
VanillaTilt.prototype.update = function update() {
var values = this.getValues();
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.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;
};
VanillaTilt.prototype.setTransition = function setTransition() {
var _this2 = this;
}
setTransition() {
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);
};
this.transitionTimeout = setTimeout(() => this.element.style.transition = "", this.settings.speed);
}
VanillaTilt.prototype.extendSettings = function extendSettings(settings) {
var defaultSettings = {
extendSettings(settings) {
let defaultSettings = {
max: 20,
perspective: 1000,
easing: "cubic-bezier(.03,.98,.52,.99)",
@ -154,27 +146,28 @@ var VanillaTilt = function () {
reset: true
};
var newSettings = {};
let 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);
let attribute = this.element.getAttribute("data-tilt-" + property);
try {
newSettings[property] = JSON.parse(attribute);
} catch (e) {
} catch ( e ) {
newSettings[property] = attribute;
}
} else {
newSettings[property] = defaultSettings[property];
}
}
return newSettings;
};
}
VanillaTilt.init = function init(elements, settings) {
static init(elements, settings) {
if (typeof elements === 'string') {
elements = document.querySelectorAll(elements);
@ -190,17 +183,19 @@ var VanillaTilt = function () {
return;
}
elements.forEach(function (element) {
elements.forEach((element) => {
if (!("vanillaTilt" in element)) {
element.vanillaTilt = new VanillaTilt(element, settings);
}
});
};
}
}
return VanillaTilt;
}();
module.exports = exports["default"];
if(typeof document !== 'undefined') {
window.VanillaTilt = VanillaTilt;
VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
}
return VanillaTilt;

1
dist/vanilla-tilt.min.js vendored Normal file
View file

@ -0,0 +1 @@
var VanillaTilt=function(){"use strict";class t{constructor(t,e={}){if(!(t instanceof Node))throw"Can't initialize VanillaTilt because "+t+" 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=t,this.settings=this.extendSettings(e),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(t){this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=this.element.offsetLeft,this.top=this.element.offsetTop,this.element.style.willChange="transform",this.setTransition()}onMouseMove(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)}onMouseLeave(t){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 t=(this.event.pageX-this.left)/this.width,e=(this.event.pageY-this.top)/this.height;t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1);let i=(this.settings.max/2-t*this.settings.max).toFixed(2),s=(e*this.settings.max-this.settings.max/2).toFixed(2);return{tiltX:i,tiltY:s,percentageX:100*t,percentageY:100*e}}update(){let t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),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(t){let e={max:20,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:"1",speed:"300",transition:!0,axis:null,reset:!0},i={};for(var s in e)if(s in t)i[s]=t[s];else if(this.element.hasAttribute("data-tilt-"+s)){let t=this.element.getAttribute("data-tilt-"+s);try{i[s]=JSON.parse(t)}catch(e){i[s]=t}}else i[s]=e[s];return i}static init(e,i){"string"==typeof e&&(e=document.querySelectorAll(e)),e instanceof Node?e=[e]:e instanceof NodeList&&(e=[].slice.call(e)),e instanceof Array&&e.forEach(e=>{"vanillaTilt"in e||(e.vanillaTilt=new t(e,i))})}}return"undefined"!=typeof document&&(window.VanillaTilt=t,t.init(document.querySelectorAll("[data-tilt]"))),t}();

4
package.json
View file

@ -34,7 +34,9 @@
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^7.0.0",
"rollup-plugin-node-resolve": "^2.0.0",
"run-proxy": "^1.0.1"
"rollup-plugin-uglify": "^1.0.1",
"run-proxy": "^1.0.1",
"uglify-js": "mishoo/UglifyJS2#harmony"
},
"release-script": {
"altPkgRootFolder": "lib"

7
src/vanilla-tilt.js
View file

@ -189,6 +189,7 @@ export default class VanillaTilt {
}
/*
VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
*/
if(typeof document !== 'undefined') {
window.VanillaTilt = VanillaTilt;
VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
}

94
yarn.lock
View file

@ -10,6 +10,14 @@ acorn@^4.0.1:
version "4.0.4"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
align-text@^0.1.1, align-text@^0.1.3:
version "0.1.4"
resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
dependencies:
kind-of "^3.0.2"
longest "^1.0.1"
repeat-string "^1.5.2"
ansi-escapes@^1.0.0, ansi-escapes@^1.1.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
@ -90,6 +98,10 @@ async@2.1.2:
dependencies:
lodash "^4.14.0"
async@~0.2.6:
version "0.2.10"
resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@ -810,6 +822,10 @@ builtin-modules@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
camelcase@^1.0.2:
version "1.2.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
camelcase@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@ -827,6 +843,13 @@ cash-cp@^0.2.0:
vorpal "^1.10.8"
vorpal-autocomplete-fs "0.0.3"
center-align@^0.1.1:
version "0.1.3"
resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
dependencies:
align-text "^0.1.3"
lazy-cache "^1.0.3"
chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@ -862,6 +885,14 @@ cli-width@^1.0.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-1.1.1.tgz#a4d293ef67ebb7b88d4a4d42c0ccf00c4d1e366d"
cliui@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
dependencies:
center-align "^0.1.1"
right-align "^0.1.1"
wordwrap "0.0.2"
cliui@^3.0.3:
version "3.2.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@ -957,7 +988,7 @@ debug@~2.2.0:
dependencies:
ms "0.7.1"
decamelize@^1.1.1:
decamelize@^1.0.0, decamelize@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@ -1458,6 +1489,10 @@ kind-of@^3.0.2:
dependencies:
is-buffer "^1.0.2"
lazy-cache@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
lcid@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
@ -1479,6 +1514,10 @@ log-update@^1.0.2:
ansi-escapes "^1.0.0"
cli-cursor "^1.0.2"
longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
loose-envify@^1.0.0:
version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
@ -1897,6 +1936,12 @@ restore-cursor@^1.0.1:
exit-hook "^1.0.0"
onetime "^1.0.0"
right-align@^0.1.1:
version "0.1.3"
resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
dependencies:
align-text "^0.1.1"
rimraf@2, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4:
version "2.5.4"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
@ -1930,6 +1975,12 @@ rollup-plugin-node-resolve@^2.0.0:
builtin-modules "^1.1.0"
resolve "^1.1.6"
rollup-plugin-uglify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-1.0.1.tgz#11d0b0c8bcd2d07e6908f74fd16b0152390b922a"
dependencies:
uglify-js "^2.6.1"
rollup-pluginutils@^1.5.0, rollup-pluginutils@^1.5.1:
version "1.5.2"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
@ -1996,7 +2047,7 @@ source-map-support@^0.4.0, source-map-support@^0.4.2:
dependencies:
source-map "^0.5.3"
source-map@^0.5.0, source-map@^0.5.3:
source-map@^0.5.0, source-map@^0.5.3, source-map@~0.5.1:
version "0.5.6"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
@ -2092,6 +2143,28 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
version "0.14.5"
resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
uglify-js@^2.6.1:
version "2.7.5"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
dependencies:
async "~0.2.6"
source-map "~0.5.1"
uglify-to-browserify "~1.0.0"
yargs "~3.10.0"
uglify-js@mishoo/UglifyJS2#harmony:
version "2.7.5"
resolved "https://codeload.github.com/mishoo/UglifyJS2/tar.gz/4bd31607f665499543bbc83192225203ae6763d1"
dependencies:
async "~0.2.6"
source-map "~0.5.1"
uglify-to-browserify "~1.0.0"
yargs "~3.10.0"
uglify-to-browserify@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
uid-number@~0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@ -2166,10 +2239,18 @@ wide-align@^1.1.0:
dependencies:
string-width "^1.0.1"
window-size@0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
window-size@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
wordwrap@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
wrap-ansi@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
@ -2204,3 +2285,12 @@ yargs@^3.15.0:
string-width "^1.0.1"
window-size "^0.1.4"
y18n "^3.2.0"
yargs@~3.10.0:
version "3.10.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
dependencies:
camelcase "^1.0.2"
cliui "^2.1.0"
decamelize "^1.0.0"
window-size "0.1.0"