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-08 16:52:13 +02:00
Code Issues Projects Releases Wiki Activity

Update version to 1.4.0 and update builded files

Browse source
This commit is contained in:
Sergiu Sandor 2017-06-13 15:51:38 +03:00
parent 44b18d1bd7
commit 1f12a26b88
10 changed files with 129 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
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 () {
@ -36,11 +36,14 @@ var VanillaTilt = function () {
this.settings = this.extendSettings(settings);
this.reverse = this.settings.reverse ? -1 : 1;
// If [data-tilt-glare] or [data-tilt-glare="true"] or [data-tilt-glare="1"]
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) this.prepareGlare();
if (this.glare) {
this.prepareGlare();
}
this.addEventListeners();
}
@ -57,14 +60,18 @@ var VanillaTilt = function () {
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);
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);
if (this.glare) {
window.removeEventListener("resize", this.onWindowResizeBind);
}
};
VanillaTilt.prototype.destroy = function destroy() {
@ -109,9 +116,10 @@ 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";
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
}
};
@ -124,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
};
};
@ -182,20 +192,20 @@ var VanillaTilt = function () {
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
if (this.glarePrerender) return;
if (this.glarePrerender) {
return;
}
var glareElementWrapperStyle = {
Object.assign(this.glareElementWrapper.style, {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"overflow": "hidden"
};
});
Object.assign(this.glareElementWrapper.style, glareElementWrapperStyle);
var glareElementStyle = {
Object.assign(this.glareElement.style, {
'position': 'absolute',
'top': '50%',
'left': '50%',
@ -206,9 +216,7 @@ var VanillaTilt = function () {
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0'
};
Object.assign(this.glareElement.style, glareElementStyle);
});
};
VanillaTilt.prototype.updateGlareSize = function updateGlareSize() {
@ -231,7 +239,9 @@ var VanillaTilt = function () {
this.transitionTimeout = setTimeout(function () {
_this2.element.style.transition = "";
if (_this2.glare) _this2.glareElement.style.transition = "";
if (_this2.glare) {
_this2.glareElement.style.transition = "";
}
}, this.settings.speed);
};

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

File diff suppressed because one or more lines are too long

54
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 {
@ -27,11 +27,14 @@ class VanillaTilt {
this.settings = this.extendSettings(settings);
this.reverse = this.settings.reverse ? -1 : 1;
// If [data-tilt-glare] or [data-tilt-glare="true"] or [data-tilt-glare="1"]
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) this.prepareGlare();
if (this.glare) {
this.prepareGlare();
}
this.addEventListeners();
}
@ -48,14 +51,18 @@ class VanillaTilt {
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);
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);
if (this.glare) {
window.removeEventListener("resize", this.onWindowResizeBind);
}
}
destroy() {
@ -101,9 +108,10 @@ 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`;
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
}
}
@ -116,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
};
}
@ -175,39 +185,37 @@ class VanillaTilt {
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
if (this.glarePrerender) return;
if (this.glarePrerender) {
return;
}
const glareElementWrapperStyle = {
Object.assign(this.glareElementWrapper.style, {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"overflow": "hidden"
};
});
Object.assign(this.glareElementWrapper.style, glareElementWrapperStyle);
const glareElementStyle = {
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`,
'width': `${this.element.offsetWidth * 2}px`,
'height': `${this.element.offsetWidth * 2}px`,
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0',
};
Object.assign(this.glareElement.style, glareElementStyle);
});
}
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}`,
});
}
@ -222,7 +230,9 @@ class VanillaTilt {
this.transitionTimeout = setTimeout(() => {
this.element.style.transition = "";
if (this.glare) this.glareElement.style.transition = "";
if (this.glare) {
this.glareElement.style.transition = "";
}
}, this.settings.speed);
}

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

File diff suppressed because one or more lines are too long

6
lib/README.md
View file

@ -30,8 +30,10 @@ A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https
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.
"max-glare": 1,
"glare-prerender": false
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
}
```

54
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 {
@ -24,11 +24,14 @@ class VanillaTilt {
this.settings = this.extendSettings(settings);
this.reverse = this.settings.reverse ? -1 : 1;
// If [data-tilt-glare] or [data-tilt-glare="true"] or [data-tilt-glare="1"]
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) this.prepareGlare();
if (this.glare) {
this.prepareGlare();
}
this.addEventListeners();
}
@ -45,14 +48,18 @@ class VanillaTilt {
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);
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);
if (this.glare) {
window.removeEventListener("resize", this.onWindowResizeBind);
}
}
destroy() {
@ -98,9 +105,10 @@ 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`;
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
}
}
@ -113,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
};
}
@ -172,39 +182,37 @@ class VanillaTilt {
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
if (this.glarePrerender) return;
if (this.glarePrerender) {
return;
}
const glareElementWrapperStyle = {
Object.assign(this.glareElementWrapper.style, {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"overflow": "hidden"
};
});
Object.assign(this.glareElementWrapper.style, glareElementWrapperStyle);
const glareElementStyle = {
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`,
'width': `${this.element.offsetWidth * 2}px`,
'height': `${this.element.offsetWidth * 2}px`,
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0',
};
Object.assign(this.glareElement.style, glareElementStyle);
});
}
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}`,
});
}
@ -219,7 +227,9 @@ class VanillaTilt {
this.transitionTimeout = setTimeout(() => {
this.element.style.transition = "";
if (this.glare) this.glareElement.style.transition = "";
if (this.glare) {
this.glareElement.style.transition = "";
}
}, this.settings.speed);
}

46
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 () {
@ -35,11 +35,14 @@ var VanillaTilt = function () {
this.settings = this.extendSettings(settings);
this.reverse = this.settings.reverse ? -1 : 1;
// If [data-tilt-glare] or [data-tilt-glare="true"] or [data-tilt-glare="1"]
this.glare = this.isSettingTrue(this.settings.glare);
this.glarePrerender = this.isSettingTrue(this.settings["glare-prerender"]);
if (this.glare) this.prepareGlare();
if (this.glare) {
this.prepareGlare();
}
this.addEventListeners();
}
@ -56,14 +59,18 @@ var VanillaTilt = function () {
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);
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);
if (this.glare) {
window.removeEventListener("resize", this.onWindowResizeBind);
}
};
VanillaTilt.prototype.destroy = function destroy() {
@ -108,9 +115,10 @@ 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";
this.glareElement.style.transform = 'rotate(180deg) translate(-50%, -50%)';
this.glareElement.style.opacity = '0';
}
};
@ -123,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
};
};
@ -181,20 +191,20 @@ var VanillaTilt = function () {
this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
this.glareElement = this.element.querySelector(".js-tilt-glare-inner");
if (this.glarePrerender) return;
if (this.glarePrerender) {
return;
}
var glareElementWrapperStyle = {
Object.assign(this.glareElementWrapper.style, {
"position": "absolute",
"top": "0",
"left": "0",
"width": "100%",
"height": "100%",
"overflow": "hidden"
};
});
Object.assign(this.glareElementWrapper.style, glareElementWrapperStyle);
var glareElementStyle = {
Object.assign(this.glareElement.style, {
'position': 'absolute',
'top': '50%',
'left': '50%',
@ -205,9 +215,7 @@ var VanillaTilt = function () {
'transform': 'rotate(180deg) translate(-50%, -50%)',
'transform-origin': '0% 0%',
'opacity': '0'
};
Object.assign(this.glareElement.style, glareElementStyle);
});
};
VanillaTilt.prototype.updateGlareSize = function updateGlareSize() {
@ -230,7 +238,9 @@ var VanillaTilt = function () {
this.transitionTimeout = setTimeout(function () {
_this2.element.style.transition = "";
if (_this2.glare) _this2.glareElement.style.transition = "";
if (_this2.glare) {
_this2.glareElement.style.transition = "";
}
}, this.settings.speed);
};

2
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "vanilla-tilt",
"version": "1.3.1",
"version": "1.4.0",
"lockfileVersion": 1,
"dependencies": {
"acorn": {

2
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",

2
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 {