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

Update version to 1.5.0

Browse source
This commit is contained in:
Sandor Sergiu 2018-10-17 20:01:03 +03:00
parent 66daa37cf5
commit cb39058aea
11 changed files with 211 additions and 204 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CONTRIBUTORS.md
View file

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

26
README.md
View file

@ -21,20 +21,20 @@ 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.
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
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
mouseEventElement: null // css-selector or link to HTML-element what will be listen mouse events
"mouse-event-element": null // css-selector or link to HTML-element what will be listen mouse events
}
```

70
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.4.1
* Version 1.5.0
*/
var VanillaTilt = function () {
@ -40,7 +40,7 @@ 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']);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
@ -60,20 +60,20 @@ var VanillaTilt = function () {
VanillaTilt.prototype.getElementListener = function getElementListener() {
if (!this.settings || !this.settings.mouseEventElement) {
if (!this.settings || !this.settings["mouse-event-element"]) {
return this.element;
}
if (typeof this.settings.mouseEventElement === 'string') {
var mouseEventElement = document.querySelector(this.settings.mouseEventElement);
if (typeof this.settings["mouse-event-element"] === "string") {
var mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);
if (mouseEventElement) {
return mouseEventElement;
}
}
if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
return this.settings.mouseEventElement;
if (this.settings["mouse-event-element"] instanceof Node) {
return this.settings["mouse-event-element"];
}
};
@ -89,12 +89,12 @@ var VanillaTilt = function () {
this.onMouseLeaveBind = this.onMouseLeave.bind(this);
this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.addEventListener('resize', this.onWindowResizeBind);
window.addEventListener("resize", this.onWindowResizeBind);
}
};
@ -104,12 +104,12 @@ var VanillaTilt = function () {
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener('resize', this.onWindowResizeBind);
window.removeEventListener("resize", this.onWindowResizeBind);
}
};
@ -130,7 +130,7 @@ var VanillaTilt = function () {
VanillaTilt.prototype.onMouseEnter = function onMouseEnter() {
this.updateElementPosition();
this.element.style.willChange = 'transform';
this.element.style.willChange = "transform";
this.setTransition();
};
@ -162,8 +162,8 @@ var VanillaTilt = function () {
}
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "0";
}
};
@ -250,23 +250,23 @@ var VanillaTilt = function () {
});
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'
"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
"width": "" + this.element.offsetWidth * 2,
"height": "" + this.element.offsetWidth * 2
});
};
@ -302,8 +302,8 @@ var VanillaTilt = function () {
* @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
* @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
* @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
* @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
* @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
* @param {string|object} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
*/
@ -312,16 +312,16 @@ var VanillaTilt = function () {
reverse: false,
max: 35,
perspective: 1000,
easing: 'cubic-bezier(.03,.98,.52,.99)',
easing: "cubic-bezier(.03,.98,.52,.99)",
scale: 1,
speed: 300,
transition: true,
axis: null,
glare: false,
'max-glare': 1,
"max-glare": 1,
"glare-prerender": false,
reset: true,
mouseEventElement: null
"mouse-event-element": null,
reset: true
};
var newSettings = {};

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

File diff suppressed because one or more lines are too long

72
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.4.1
* Version 1.5.0
*/
class VanillaTilt {
@ -31,7 +31,7 @@ class VanillaTilt {
this.reverse = this.settings.reverse ? -1 : 1;
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings['glare-prerender']);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
@ -49,18 +49,20 @@ class VanillaTilt {
* @return {Node}
*/
getElementListener() {
if (!this.settings || !this.settings.mouseEventElement) { return this.element; }
if (!this.settings || !this.settings["mouse-event-element"]) {
return this.element;
}
if (typeof this.settings.mouseEventElement === 'string') {
const mouseEventElement = document.querySelector(this.settings.mouseEventElement);
if (typeof this.settings["mouse-event-element"] === "string") {
const mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);
if (mouseEventElement) {
return mouseEventElement;
}
}
if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
return this.settings.mouseEventElement;
if (this.settings["mouse-event-element"] instanceof Node) {
return this.settings["mouse-event-element"];
}
}
@ -74,12 +76,12 @@ class VanillaTilt {
this.onMouseLeaveBind = this.onMouseLeave.bind(this);
this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.addEventListener('resize', this.onWindowResizeBind);
window.addEventListener("resize", this.onWindowResizeBind);
}
}
@ -87,12 +89,12 @@ class VanillaTilt {
* Method remove event listeners from current this.elementListener
*/
removeEventListeners() {
this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener('resize', this.onWindowResizeBind);
window.removeEventListener("resize", this.onWindowResizeBind);
}
}
@ -113,7 +115,7 @@ class VanillaTilt {
onMouseEnter() {
this.updateElementPosition();
this.element.style.willChange = 'transform';
this.element.style.willChange = "transform";
this.setTransition();
}
@ -148,8 +150,8 @@ class VanillaTilt {
}
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "0";
}
}
@ -237,23 +239,23 @@ class VanillaTilt {
});
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',
"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}`,
"width": `${this.element.offsetWidth * 2}`,
"height": `${this.element.offsetWidth * 2}`,
});
}
@ -288,24 +290,24 @@ class VanillaTilt {
* @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
* @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
* @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
* @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
* @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
* @param {string|object} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
*/
extendSettings(settings) {
let defaultSettings = {
reverse: false,
max: 35,
perspective: 1000,
easing: 'cubic-bezier(.03,.98,.52,.99)',
easing: "cubic-bezier(.03,.98,.52,.99)",
scale: 1,
speed: 300,
transition: true,
axis: null,
glare: false,
'max-glare': 1,
"max-glare": 1,
"glare-prerender": false,
reset: true,
mouseEventElement: null,
"mouse-event-element": null,
reset: true
};
let newSettings = {};

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

File diff suppressed because one or more lines are too long

26
lib/README.md
View file

@ -21,20 +21,20 @@ 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.
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
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
mouseEventElement: null // css-selector or link to HTML-element what will be listen mouse events
"mouse-event-element": null // css-selector or link to HTML-element what will be listen mouse events
}
```

72
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.4.1
* Version 1.5.0
*/
class VanillaTilt {
@ -28,7 +28,7 @@ class VanillaTilt {
this.reverse = this.settings.reverse ? -1 : 1;
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings['glare-prerender']);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
@ -46,18 +46,20 @@ class VanillaTilt {
* @return {Node}
*/
getElementListener() {
if (!this.settings || !this.settings.mouseEventElement) { return this.element; }
if (!this.settings || !this.settings["mouse-event-element"]) {
return this.element;
}
if (typeof this.settings.mouseEventElement === 'string') {
const mouseEventElement = document.querySelector(this.settings.mouseEventElement);
if (typeof this.settings["mouse-event-element"] === "string") {
const mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);
if (mouseEventElement) {
return mouseEventElement;
}
}
if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
return this.settings.mouseEventElement;
if (this.settings["mouse-event-element"] instanceof Node) {
return this.settings["mouse-event-element"];
}
}
@ -71,12 +73,12 @@ class VanillaTilt {
this.onMouseLeaveBind = this.onMouseLeave.bind(this);
this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.addEventListener('resize', this.onWindowResizeBind);
window.addEventListener("resize", this.onWindowResizeBind);
}
}
@ -84,12 +86,12 @@ class VanillaTilt {
* Method remove event listeners from current this.elementListener
*/
removeEventListeners() {
this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener('resize', this.onWindowResizeBind);
window.removeEventListener("resize", this.onWindowResizeBind);
}
}
@ -110,7 +112,7 @@ class VanillaTilt {
onMouseEnter() {
this.updateElementPosition();
this.element.style.willChange = 'transform';
this.element.style.willChange = "transform";
this.setTransition();
}
@ -145,8 +147,8 @@ class VanillaTilt {
}
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "0";
}
}
@ -234,23 +236,23 @@ class VanillaTilt {
});
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',
"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}`,
"width": `${this.element.offsetWidth * 2}`,
"height": `${this.element.offsetWidth * 2}`,
});
}
@ -285,24 +287,24 @@ class VanillaTilt {
* @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
* @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
* @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
* @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
* @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
* @param {string|object} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
*/
extendSettings(settings) {
let defaultSettings = {
reverse: false,
max: 35,
perspective: 1000,
easing: 'cubic-bezier(.03,.98,.52,.99)',
easing: "cubic-bezier(.03,.98,.52,.99)",
scale: 1,
speed: 300,
transition: true,
axis: null,
glare: false,
'max-glare': 1,
"max-glare": 1,
"glare-prerender": false,
reset: true,
mouseEventElement: null,
"mouse-event-element": null,
reset: true
};
let newSettings = {};

70
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.4.1
* Version 1.5.0
*/
var VanillaTilt = function () {
@ -39,7 +39,7 @@ 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']);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
@ -59,20 +59,20 @@ var VanillaTilt = function () {
VanillaTilt.prototype.getElementListener = function getElementListener() {
if (!this.settings || !this.settings.mouseEventElement) {
if (!this.settings || !this.settings["mouse-event-element"]) {
return this.element;
}
if (typeof this.settings.mouseEventElement === 'string') {
var mouseEventElement = document.querySelector(this.settings.mouseEventElement);
if (typeof this.settings["mouse-event-element"] === "string") {
var mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);
if (mouseEventElement) {
return mouseEventElement;
}
}
if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
return this.settings.mouseEventElement;
if (this.settings["mouse-event-element"] instanceof Node) {
return this.settings["mouse-event-element"];
}
};
@ -88,12 +88,12 @@ var VanillaTilt = function () {
this.onMouseLeaveBind = this.onMouseLeave.bind(this);
this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.addEventListener('resize', this.onWindowResizeBind);
window.addEventListener("resize", this.onWindowResizeBind);
}
};
@ -103,12 +103,12 @@ var VanillaTilt = function () {
VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener('resize', this.onWindowResizeBind);
window.removeEventListener("resize", this.onWindowResizeBind);
}
};
@ -129,7 +129,7 @@ var VanillaTilt = function () {
VanillaTilt.prototype.onMouseEnter = function onMouseEnter() {
this.updateElementPosition();
this.element.style.willChange = 'transform';
this.element.style.willChange = "transform";
this.setTransition();
};
@ -161,8 +161,8 @@ var VanillaTilt = function () {
}
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "0";
}
};
@ -249,23 +249,23 @@ var VanillaTilt = function () {
});
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'
"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
"width": "" + this.element.offsetWidth * 2,
"height": "" + this.element.offsetWidth * 2
});
};
@ -301,8 +301,8 @@ var VanillaTilt = function () {
* @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
* @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
* @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
* @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
* @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
* @param {string|object} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
*/
@ -311,16 +311,16 @@ var VanillaTilt = function () {
reverse: false,
max: 35,
perspective: 1000,
easing: 'cubic-bezier(.03,.98,.52,.99)',
easing: "cubic-bezier(.03,.98,.52,.99)",
scale: 1,
speed: 300,
transition: true,
axis: null,
glare: false,
'max-glare': 1,
"max-glare": 1,
"glare-prerender": false,
reset: true,
mouseEventElement: null
"mouse-event-element": null,
reset: true
};
var newSettings = {};

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "vanilla-tilt",
"version": "1.4.2",
"version": "1.5.0",
"description": "A smooth 3D tilt javascript library forked from Tilt.js",
"main": "lib/vanilla-tilt.js",
"module_es2015": "lib/vanilla-tilt.es2015.js",

72
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.4.2
* Version 1.5.0
*/
export default class VanillaTilt {
@ -28,7 +28,7 @@ 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']);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) {
this.prepareGlare();
@ -46,18 +46,20 @@ export default class VanillaTilt {
* @return {Node}
*/
getElementListener() {
if (!this.settings || !this.settings.mouseEventElement) { return this.element; }
if (!this.settings || !this.settings["mouse-event-element"]) {
return this.element;
}
if (typeof this.settings.mouseEventElement === 'string') {
const mouseEventElement = document.querySelector(this.settings.mouseEventElement);
if (typeof this.settings["mouse-event-element"] === "string") {
const mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);
if (mouseEventElement) {
return mouseEventElement;
}
}
if (this.settings.mouseEventElement instanceof Node && this.settings.mouseEventElement) {
return this.settings.mouseEventElement;
if (this.settings["mouse-event-element"] instanceof Node) {
return this.settings["mouse-event-element"];
}
}
@ -71,12 +73,12 @@ export default class VanillaTilt {
this.onMouseLeaveBind = this.onMouseLeave.bind(this);
this.onWindowResizeBind = this.onWindowResizeBind.bind(this);
this.elementListener.addEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.addEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.addEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.addEventListener('resize', this.onWindowResizeBind);
window.addEventListener("resize", this.onWindowResizeBind);
}
}
@ -84,12 +86,12 @@ export default class VanillaTilt {
* Method remove event listeners from current this.elementListener
*/
removeEventListeners() {
this.elementListener.removeEventListener('mouseenter', this.onMouseEnterBind);
this.elementListener.removeEventListener('mousemove', this.onMouseMoveBind);
this.elementListener.removeEventListener('mouseleave', this.onMouseLeaveBind);
this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
if (this.glare) {
window.removeEventListener('resize', this.onWindowResizeBind);
window.removeEventListener("resize", this.onWindowResizeBind);
}
}
@ -110,7 +112,7 @@ export default class VanillaTilt {
onMouseEnter() {
this.updateElementPosition();
this.element.style.willChange = 'transform';
this.element.style.willChange = "transform";
this.setTransition();
}
@ -145,8 +147,8 @@ export default class VanillaTilt {
}
if (this.glare) {
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
this.glareElement.style.opacity = "0";
}
}
@ -234,23 +236,23 @@ export default class VanillaTilt {
});
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',
"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}`,
"width": `${this.element.offsetWidth * 2}`,
"height": `${this.element.offsetWidth * 2}`,
});
}
@ -285,24 +287,24 @@ export default class VanillaTilt {
* @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
* @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
* @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
* @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
* @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
* @param {string|object} settings.mouseEventElement - String selector or link to HTML-element what will be listen mouse events
*/
extendSettings(settings) {
let defaultSettings = {
reverse: false,
max: 35,
perspective: 1000,
easing: 'cubic-bezier(.03,.98,.52,.99)',
easing: "cubic-bezier(.03,.98,.52,.99)",
scale: 1,
speed: 300,
transition: true,
axis: null,
glare: false,
'max-glare': 1,
"max-glare": 1,
"glare-prerender": false,
reset: true,
mouseEventElement: null,
"mouse-event-element": null,
reset: true
};
let newSettings = {};