mirror of
https://github.com/micku7zu/vanilla-tilt.js
synced 2024-06-10 09:42:11 +02:00
Fixing glare being too small when the container's vertical dimension is greater than its horizontal. (#91)
This commit is contained in:
parent
4a644269a1
commit
20f9edad9e
|
@ -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}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue