So fügen Sie einer Maske einen CSS-Übergang hinzu ⇐ JavaScript

[Guest]

Ich versuche, wie in diesem Beispiel einen Übergang zum Maskeneffekt hinzuzufügen:
https://bricksforge.io/
Ich habe den Übergang sowohl auf Co- als auch auf pattern__overlay, wo sich die Maske befindet, und zum :root, wo sich die bei der Mausbewegung aktualisierten CSS-Variablen befinden.

Code: Select all

const cursor = document.querySelector('.hero');
cursor.addEventListener('mousemove', (event) => {
const rect = cursor.getBoundingClientRect();
const mouseX = ((event.clientX - rect.left) / rect.width) * 100 + '%';
const mouseY = ((event.clientY - rect.top) / rect.height) * 100 + '%';

document.documentElement.style.setProperty('--mouse-x', mouseX);
document.documentElement.style.setProperty('--mouse-y', mouseY);
});

Code: Select all

:root {
--mouse-x: 0px;
--mouse-y: 0px;
transition: --mouse-x 0.3s ease, --mouse-y 0.3s ease;
}

.co-pattern__overlay {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
background-color: #0f1218;
z-index: 1;
transition: all 0.5s ease;
}

.co-pattern__overlay {
mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 20px, black 350px);
-webkit-mask: radial-gradient(circle at var(--mouse-x) var(--mouse-y), transparent 20px, black 350px);
}

Code: Select all