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-26 01:00:00 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #25 from micku7zu/glare

Browse source 
Glare
This commit is contained in:
Șandor Sergiu 2017-06-13 15:53:02 +03:00 committed by GitHub
parent ab8e3ada4d c335c3cfd2
commit d4ffdd84f0
14 changed files with 3357 additions and 2348 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CONTRIBUTORS.md
View file

@ -1,3 +1,3 @@
# Contributors
- [Livio Brunner](https://github.com/BrunnerLivio) <<a href="mailto:contact@brunnerliv.io">contact@brunnerliv.io</a>> (Typings)
- [Livio Brunner](https://github.com/BrunnerLivio) <<a href="mailto:contact@brunnerliv.io">contact@brunnerliv.io</a>> (Typings & Glare Effect)

24
README.md
View file

@ -21,15 +21,19 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
### Options
```js
{
reverse: false, // reverse the tilt direction
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: 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.
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
}
```
@ -86,4 +90,4 @@ Original library author: [Gijs Rogé](https://twitter.com/GijsRoge)
### License
MIT License
MIT License

10
build.js
View file

@ -3,7 +3,7 @@ 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 {minify} from 'uglify-es';
import fs from 'fs';
const pkg = require('./package.json');
@ -65,9 +65,7 @@ rollup({
format: 'iife',
dest: pkg.distrib,
}).then(() => {
const code = minify(pkg.distrib, {
mangle: {except: ['VanillaTilt']}
}).code;
const code = minify(fs.readFileSync(pkg.distrib).toString()).code;
fs.writeFileSync(pkg.distrib.replace('.js', '.min.js'), code);
return bundle;
@ -94,9 +92,7 @@ rollup({
dest: dest,
})
.then(() => {
const code = minify(dest, {
mangle: {except: ['VanillaTilt']}
}).code;
const code = minify(fs.readFileSync(dest).toString()).code;
fs.writeFileSync(dest.replace('.js', '.min.js'), code);
return bundle;

106
dist/vanilla-tilt.babel.js vendored
View file

@ -11,7 +11,7 @@ var classCallCheck = function (instance, Constructor) {
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.3.1
* Version 1.4.0
*/
var VanillaTilt = function () {
@ -37,23 +37,41 @@ var VanillaTilt = function () {
this.reverse = this.settings.reverse ? -1 : 1;
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
}
this.addEventListeners();
}
VanillaTilt.prototype.isSettingTrue = function isSettingTrue(setting) {
return setting === "" || setting === true || setting === 1;
};
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);
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
};
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
this.element.removeEventListener("mousemove", this.onMouseMoveBind);
this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener("resize", this.onWindowResizeBind);
}
};
VanillaTilt.prototype.destroy = function destroy() {
@ -98,6 +116,11 @@ var VanillaTilt = function () {
_this.element.style.transform = "perspective(" + _this.settings.perspective + "px) " + "rotateX(0deg) " + "rotateY(0deg) " + "scale3d(1, 1, 1)";
});
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
}
};
VanillaTilt.prototype.getValues = function getValues() {
@ -109,12 +132,14 @@ var VanillaTilt = function () {
var tiltX = (this.reverse * (this.settings.max / 2 - x * this.settings.max)).toFixed(2);
var tiltY = (this.reverse * (y * this.settings.max - this.settings.max / 2)).toFixed(2);
var angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);
return {
tiltX: tiltX,
tiltY: tiltY,
percentageX: x * 100,
percentageY: y * 100
percentageY: y * 100,
angle: angle
};
};
@ -132,6 +157,11 @@ var VanillaTilt = function () {
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 + ")";
if (this.glare) {
this.glareElement.style.transform = "rotate(" + values.angle + "deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "" + values.percentageY * this.settings["max-glare"] / 100;
}
this.element.dispatchEvent(new CustomEvent("tiltChange", {
"detail": values
}));
@ -139,13 +169,79 @@ var VanillaTilt = function () {
this.updateCall = null;
};
/**
* Appends the glare element (if glarePrerender equals false)
* and sets the default style
*/
VanillaTilt.prototype.prepareGlare = function prepareGlare() {
// If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
if (!this.glarePrerender) {
// Create glare element
var jsTiltGlare = document.createElement("div");
jsTiltGlare.classList.add("js-tilt-glare");
var jsTiltGlareInner = document.createElement("div");
jsTiltGlareInner.classList.add("js-tilt-glare-inner");
jsTiltGlare.appendChild(jsTiltGlareInner);
this.element.appendChild(jsTiltGlare);
}
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
if (this.glarePrerender) {
return;
}
Object.assign(this.glareElementWrapper.style, {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"overflow": "hidden"
});
Object.assign(this.glareElement.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': this.element.offsetWidth * 2 + "px",
'height': this.element.offsetWidth * 2 + "px",
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0'
});
};
VanillaTilt.prototype.updateGlareSize = function updateGlareSize() {
Object.assign(this.glareElement.style, {
'width': "" + this.element.offsetWidth * 2,
'height': "" + this.element.offsetWidth * 2
});
};
VanillaTilt.prototype.onWindowResizeBind = function onWindowResizeBind() {
this.updateGlareSize();
};
VanillaTilt.prototype.setTransition = function setTransition() {
var _this2 = this;
clearTimeout(this.transitionTimeout);
this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
if (this.glare) this.glareElement.style.transition = "opacity " + this.settings.speed + "ms " + this.settings.easing;
this.transitionTimeout = setTimeout(function () {
return _this2.element.style.transition = "";
_this2.element.style.transition = "";
if (_this2.glare) {
_this2.glareElement.style.transition = "";
}
}, this.settings.speed);
};
@ -159,11 +255,13 @@ var VanillaTilt = function () {
speed: "300",
transition: true,
axis: null,
glare: false,
"max-glare": 1,
"glare-prerender": false,
reset: true
};
var newSettings = {};
for (var property in defaultSettings) {
if (property in settings) {
newSettings[property] = settings[property];

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

File diff suppressed because one or more lines are too long

106
dist/vanilla-tilt.js vendored
View file

@ -5,7 +5,7 @@ var VanillaTilt = (function () {
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.3.1
* Version 1.4.0
*/
class VanillaTilt {
@ -28,23 +28,41 @@ class VanillaTilt {
this.reverse = this.settings.reverse ? -1 : 1;
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
}
this.addEventListeners();
}
isSettingTrue(setting) {
return setting === "" || setting === true || setting === 1;
}
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);
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
}
removeEventListeners() {
this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
this.element.removeEventListener("mousemove", this.onMouseMoveBind);
this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener("resize", this.onWindowResizeBind);
}
}
destroy() {
@ -90,6 +108,11 @@ class VanillaTilt {
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
});
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
}
}
getValues() {
@ -101,12 +124,14 @@ class VanillaTilt {
let tiltX = (this.reverse * (this.settings.max / 2 - x * this.settings.max)).toFixed(2);
let tiltY = (this.reverse * (y * this.settings.max - this.settings.max / 2)).toFixed(2);
let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);
return {
tiltX: tiltX,
tiltY: tiltY,
percentageX: x * 100,
percentageY: y * 100
percentageY: y * 100,
angle: angle
};
}
@ -127,6 +152,10 @@ class VanillaTilt {
"rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
"scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
if (this.glare) {
this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`;
this.glareElement.style.opacity = `${values.percentageY * this.settings["max-glare"] / 100}`;
}
this.element.dispatchEvent(new CustomEvent("tiltChange", {
"detail": values
@ -135,10 +164,77 @@ class VanillaTilt {
this.updateCall = null;
}
/**
* Appends the glare element (if glarePrerender equals false)
* and sets the default style
*/
prepareGlare() {
// If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
if (!this.glarePrerender) {
// Create glare element
const jsTiltGlare = document.createElement("div");
jsTiltGlare.classList.add("js-tilt-glare");
const jsTiltGlareInner = document.createElement("div");
jsTiltGlareInner.classList.add("js-tilt-glare-inner");
jsTiltGlare.appendChild(jsTiltGlareInner);
this.element.appendChild(jsTiltGlare);
}
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
if (this.glarePrerender) {
return;
}
Object.assign(this.glareElementWrapper.style, {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"overflow": "hidden"
});
Object.assign(this.glareElement.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': `${this.element.offsetWidth * 2}px`,
'height': `${this.element.offsetWidth * 2}px`,
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0',
});
}
updateGlareSize() {
Object.assign(this.glareElement.style, {
'width': `${this.element.offsetWidth * 2}`,
'height': `${this.element.offsetWidth * 2}`,
});
}
onWindowResizeBind() {
this.updateGlareSize();
}
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);
if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`;
this.transitionTimeout = setTimeout(() => {
this.element.style.transition = "";
if (this.glare) {
this.glareElement.style.transition = "";
}
}, this.settings.speed);
}
extendSettings(settings) {
@ -151,11 +247,13 @@ class VanillaTilt {
speed: "300",
transition: true,
axis: null,
glare: false,
"max-glare": 1,
"glare-prerender": false,
reset: true
};
let newSettings = {};
for (var property in defaultSettings) {
if (property in settings) {
newSettings[property] = settings[property];

2
dist/vanilla-tilt.min.js vendored
View file

File diff suppressed because one or more lines are too long

28
lib/README.md
View file

@ -1,4 +1,8 @@
# vanilla-tilt.js
[![npm version](https://badge.fury.io/js/vanilla-tilt.svg)](https://badge.fury.io/js/vanilla-tilt)
[![ghit.me](https://ghit.me/badge.svg?repo=micku7zu/vanilla-tilt.js)](https://ghit.me/repo/micku7zu/vanilla-tilt.js)
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/)
@ -17,15 +21,19 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
### Options
```js
{
reverse: false, // reverse the tilt direction
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: 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.
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
}
```
@ -82,4 +90,4 @@ Original library author: [Gijs Rogé](https://twitter.com/GijsRoge)
### License
MIT License
MIT License

106
lib/vanilla-tilt.es2015.js
View file

@ -2,7 +2,7 @@
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.3.1
* Version 1.4.0
*/
class VanillaTilt {
@ -25,23 +25,41 @@ class VanillaTilt {
this.reverse = this.settings.reverse ? -1 : 1;
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
}
this.addEventListeners();
}
isSettingTrue(setting) {
return setting === "" || setting === true || setting === 1;
}
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);
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
}
removeEventListeners() {
this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
this.element.removeEventListener("mousemove", this.onMouseMoveBind);
this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener("resize", this.onWindowResizeBind);
}
}
destroy() {
@ -87,6 +105,11 @@ class VanillaTilt {
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
});
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
}
}
getValues() {
@ -98,12 +121,14 @@ class VanillaTilt {
let tiltX = (this.reverse * (this.settings.max / 2 - x * this.settings.max)).toFixed(2);
let tiltY = (this.reverse * (y * this.settings.max - this.settings.max / 2)).toFixed(2);
let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);
return {
tiltX: tiltX,
tiltY: tiltY,
percentageX: x * 100,
percentageY: y * 100
percentageY: y * 100,
angle: angle
};
}
@ -124,6 +149,10 @@ class VanillaTilt {
"rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
"scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
if (this.glare) {
this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`;
this.glareElement.style.opacity = `${values.percentageY * this.settings["max-glare"] / 100}`;
}
this.element.dispatchEvent(new CustomEvent("tiltChange", {
"detail": values
@ -132,10 +161,77 @@ class VanillaTilt {
this.updateCall = null;
}
/**
* Appends the glare element (if glarePrerender equals false)
* and sets the default style
*/
prepareGlare() {
// If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
if (!this.glarePrerender) {
// Create glare element
const jsTiltGlare = document.createElement("div");
jsTiltGlare.classList.add("js-tilt-glare");
const jsTiltGlareInner = document.createElement("div");
jsTiltGlareInner.classList.add("js-tilt-glare-inner");
jsTiltGlare.appendChild(jsTiltGlareInner);
this.element.appendChild(jsTiltGlare);
}
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
if (this.glarePrerender) {
return;
}
Object.assign(this.glareElementWrapper.style, {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"overflow": "hidden"
});
Object.assign(this.glareElement.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': `${this.element.offsetWidth * 2}px`,
'height': `${this.element.offsetWidth * 2}px`,
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0',
});
}
updateGlareSize() {
Object.assign(this.glareElement.style, {
'width': `${this.element.offsetWidth * 2}`,
'height': `${this.element.offsetWidth * 2}`,
});
}
onWindowResizeBind() {
this.updateGlareSize();
}
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);
if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`;
this.transitionTimeout = setTimeout(() => {
this.element.style.transition = "";
if (this.glare) {
this.glareElement.style.transition = "";
}
}, this.settings.speed);
}
extendSettings(settings) {
@ -148,11 +244,13 @@ class VanillaTilt {
speed: "300",
transition: true,
axis: null,
glare: false,
"max-glare": 1,
"glare-prerender": false,
reset: true
};
let newSettings = {};
for (var property in defaultSettings) {
if (property in settings) {
newSettings[property] = settings[property];

106
lib/vanilla-tilt.js
View file

@ -10,7 +10,7 @@ var classCallCheck = function (instance, Constructor) {
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.3.1
* Version 1.4.0
*/
var VanillaTilt = function () {
@ -36,23 +36,41 @@ var VanillaTilt = function () {
this.reverse = this.settings.reverse ? -1 : 1;
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
}
this.addEventListeners();
}
VanillaTilt.prototype.isSettingTrue = function isSettingTrue(setting) {
return setting === "" || setting === true || setting === 1;
};
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);
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
};
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
this.element.removeEventListener("mousemove", this.onMouseMoveBind);
this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener("resize", this.onWindowResizeBind);
}
};
VanillaTilt.prototype.destroy = function destroy() {
@ -97,6 +115,11 @@ var VanillaTilt = function () {
_this.element.style.transform = "perspective(" + _this.settings.perspective + "px) " + "rotateX(0deg) " + "rotateY(0deg) " + "scale3d(1, 1, 1)";
});
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
}
};
VanillaTilt.prototype.getValues = function getValues() {
@ -108,12 +131,14 @@ var VanillaTilt = function () {
var tiltX = (this.reverse * (this.settings.max / 2 - x * this.settings.max)).toFixed(2);
var tiltY = (this.reverse * (y * this.settings.max - this.settings.max / 2)).toFixed(2);
var angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);
return {
tiltX: tiltX,
tiltY: tiltY,
percentageX: x * 100,
percentageY: y * 100
percentageY: y * 100,
angle: angle
};
};
@ -131,6 +156,11 @@ var VanillaTilt = function () {
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 + ")";
if (this.glare) {
this.glareElement.style.transform = "rotate(" + values.angle + "deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "" + values.percentageY * this.settings["max-glare"] / 100;
}
this.element.dispatchEvent(new CustomEvent("tiltChange", {
"detail": values
}));
@ -138,13 +168,79 @@ var VanillaTilt = function () {
this.updateCall = null;
};
/**
* Appends the glare element (if glarePrerender equals false)
* and sets the default style
*/
VanillaTilt.prototype.prepareGlare = function prepareGlare() {
// If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
if (!this.glarePrerender) {
// Create glare element
var jsTiltGlare = document.createElement("div");
jsTiltGlare.classList.add("js-tilt-glare");
var jsTiltGlareInner = document.createElement("div");
jsTiltGlareInner.classList.add("js-tilt-glare-inner");
jsTiltGlare.appendChild(jsTiltGlareInner);
this.element.appendChild(jsTiltGlare);
}
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
if (this.glarePrerender) {
return;
}
Object.assign(this.glareElementWrapper.style, {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"overflow": "hidden"
});
Object.assign(this.glareElement.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': this.element.offsetWidth * 2 + "px",
'height': this.element.offsetWidth * 2 + "px",
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0'
});
};
VanillaTilt.prototype.updateGlareSize = function updateGlareSize() {
Object.assign(this.glareElement.style, {
'width': "" + this.element.offsetWidth * 2,
'height': "" + this.element.offsetWidth * 2
});
};
VanillaTilt.prototype.onWindowResizeBind = function onWindowResizeBind() {
this.updateGlareSize();
};
VanillaTilt.prototype.setTransition = function setTransition() {
var _this2 = this;
clearTimeout(this.transitionTimeout);
this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
if (this.glare) this.glareElement.style.transition = "opacity " + this.settings.speed + "ms " + this.settings.easing;
this.transitionTimeout = setTimeout(function () {
return _this2.element.style.transition = "";
_this2.element.style.transition = "";
if (_this2.glare) {
_this2.glareElement.style.transition = "";
}
}, this.settings.speed);
};
@ -158,11 +254,13 @@ var VanillaTilt = function () {
speed: "300",
transition: true,
axis: null,
glare: false,
"max-glare": 1,
"glare-prerender": false,
reset: true
};
var newSettings = {};
for (var property in defaultSettings) {
if (property in settings) {
newSettings[property] = settings[property];

2807
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -1,6 +1,6 @@
{
"name": "vanilla-tilt",
"version": "1.3.1",
"version": "1.4.0",
"description": "A smooth 3D tilt javascript library forked from Tilt.js",
"main": "lib/vanilla-tilt.js",
"module_es2015": "lib/vanilla-tilt.es2015.js",
@ -36,7 +36,7 @@
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-uglify": "^1.0.1",
"run-proxy": "^1.0.1",
"uglify-js": "mishoo/UglifyJS2#harmony"
"uglify-es": "github:mishoo/UglifyJS2#harmony"
},
"release-script": {
"altPkgRootFolder": "lib"

106
src/vanilla-tilt.js
View file

@ -2,7 +2,7 @@
* Created by Șandor Sergiu (micku7zu) on 1/27/2017.
* Original idea: https://github.com/gijsroge/tilt.js
* MIT License.
* Version 1.3.1
* Version 1.4.0
*/
export default class VanillaTilt {
@ -25,23 +25,41 @@ export default class VanillaTilt {
this.reverse = this.settings.reverse ? -1 : 1;
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
}
this.addEventListeners();
}
isSettingTrue(setting) {
return setting === "" || setting === true || setting === 1;
}
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);
if (this.glare) {
window.addEventListener("resize", this.onWindowResizeBind);
}
}
removeEventListeners() {
this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
this.element.removeEventListener("mousemove", this.onMouseMoveBind);
this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener("resize", this.onWindowResizeBind);
}
}
destroy() {
@ -87,6 +105,11 @@ export default class VanillaTilt {
"rotateY(0deg) " +
"scale3d(1, 1, 1)";
});
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
}
}
getValues() {
@ -98,12 +121,14 @@ export default class VanillaTilt {
let tiltX = (this.reverse * (this.settings.max / 2 - x * this.settings.max)).toFixed(2);
let tiltY = (this.reverse * (y * this.settings.max - this.settings.max / 2)).toFixed(2);
let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);
return {
tiltX: tiltX,
tiltY: tiltY,
percentageX: x * 100,
percentageY: y * 100
percentageY: y * 100,
angle: angle
};
}
@ -124,6 +149,10 @@ export default class VanillaTilt {
"rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
"scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
if (this.glare) {
this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`;
this.glareElement.style.opacity = `${values.percentageY * this.settings["max-glare"] / 100}`;
}
this.element.dispatchEvent(new CustomEvent("tiltChange", {
"detail": values
@ -132,10 +161,77 @@ export default class VanillaTilt {
this.updateCall = null;
}
/**
* Appends the glare element (if glarePrerender equals false)
* and sets the default style
*/
prepareGlare() {
// If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
if (!this.glarePrerender) {
// Create glare element
const jsTiltGlare = document.createElement("div");
jsTiltGlare.classList.add("js-tilt-glare");
const jsTiltGlareInner = document.createElement("div");
jsTiltGlareInner.classList.add("js-tilt-glare-inner");
jsTiltGlare.appendChild(jsTiltGlareInner);
this.element.appendChild(jsTiltGlare);
}
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
if (this.glarePrerender) {
return;
}
Object.assign(this.glareElementWrapper.style, {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"overflow": "hidden"
});
Object.assign(this.glareElement.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': `${this.element.offsetWidth * 2}px`,
'height': `${this.element.offsetWidth * 2}px`,
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0',
});
}
updateGlareSize() {
Object.assign(this.glareElement.style, {
'width': `${this.element.offsetWidth * 2}`,
'height': `${this.element.offsetWidth * 2}`,
});
}
onWindowResizeBind() {
this.updateGlareSize();
}
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);
if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`;
this.transitionTimeout = setTimeout(() => {
this.element.style.transition = "";
if (this.glare) {
this.glareElement.style.transition = "";
}
}, this.settings.speed);
}
extendSettings(settings) {
@ -148,11 +244,13 @@ export default class VanillaTilt {
speed: "300",
transition: true,
axis: null,
glare: false,
"max-glare": 1,
"glare-prerender": false,
reset: true
};
let newSettings = {};
for (var property in defaultSettings) {
if (property in settings) {
newSettings[property] = settings[property];

2296
yarn.lock
View file

File diff suppressed because it is too large Load diff