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-09 09:12:13 +02:00
Code Issues Projects Releases Wiki Activity

Fixing glare being too small when the container's vertical dimension is greater than its horizontal.

Browse source
This commit is contained in:
noxifoxi 2021-08-23 01:33:23 +02:00
parent 4a644269a1
commit 0469ffc205
1 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/vanilla-tilt.js
View file

@ -350,14 +350,15 @@ export default class VanillaTilt {
"pointer-events": "none"
});
const glareSize = (this.element.offsetWidth > this.element.offsetHeight ? this.element.offsetWidth : this.element.offsetHeight) * 2;
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": `${glareSize}px`,
"height": `${glareSize}px`,
"transform": "rotate(180deg) translate(-50%, -50%)",
"transform-origin": "0% 0%",
"opacity": "0",
@ -366,9 +367,10 @@ export default class VanillaTilt {
updateGlareSize() {
if (this.glare) {
const glareSize = (this.element.offsetWidth > this.element.offsetHeight ? this.element.offsetWidth : this.element.offsetHeight) * 2;
Object.assign(this.glareElement.style, {
"width": `${this.element.offsetWidth * 2}`,
"height": `${this.element.offsetWidth * 2}`,
"width": `${glareSize}`,
"height": `${glareSize}`,
});
}
}