<div class="cursor-gradient">
</div>
<div class="cursor-gradient">
</div>
{
"language": "en-US"
}
.cursor-gradient {
position: fixed;
width: 1000px;
height: 1000px;
background: radial-gradient(var(--color-compliment) 0%, transparent 50%); /* stylelint-disable-line plugin/no-unsupported-browser-features */
transform: translate(-50%, -50%);
z-index: map_get($zindex, cursorGradient);
opacity: .8;
pointer-events: none;
mix-blend-mode: overlay; /* stylelint-disable-line plugin/no-unsupported-browser-features */
}
.cursor-gradient__wrapper {
background-color: var(--color-background);
transition: background-color $transition-duration $transition-easing;
}
import './cursor-gradient.scss';
import Component from '@component';
import MouseMoveEvent = JQuery.MouseMoveEvent;
import Helpers from '@helpers';
export default class CursorGradient extends Component {
static initSelector: string = '.cursor-gradient';
constructor(element: HTMLElement) {
super(element);
Helpers.enableGradient();
window.addEventListener('mousemove', this.mouseMove.bind(this));
}
mouseMove(e: MouseMoveEvent): void {
this.element.css('left', e.clientX + 'px');
this.element.css('top', e.clientY + 'px');
}
}