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

don't visibly glare/scale unless hovered

Browse source
This commit is contained in:
dragonwocky 2020-04-02 09:50:50 +11:00 committed by GitHub
parent e0e07613e2
commit bec78323fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/vanilla-tilt.js
View file

@ -295,16 +295,23 @@ export default class VanillaTilt {
}
update() {
let values = this.getValues();
const hovered = [].slice
.call(this.element.parentElement.querySelectorAll(':hover'))
.includes(this.element),
values = this.getValues(),
scale = hovered ? this.settings.scale : 1,
glareOpacity = hovered
? (values.percentageY * this.settings['max-glare']) / 100
: 0;
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 + ")";
"scale3d(" + scale + ", " + scale + ", " + 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.glareElement.style.opacity = `${glareOpacity}`;
}
this.element.dispatchEvent(new CustomEvent("tiltChange", {