Курсор X-Ray

<style>
/*Указываем ширину экрана, где скрипт начнет работать (980px)*/
@media only screen and (min-width: 980px) {
:root {
--MaskSizeX: 8px; /*Размер маски изначально (размеры есть еще внизу)*/
}
.back-box {
position: absolute;
width: 100%;
display: flex;
z-index: 999;
mask-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='50' cy='50' r='50' fill='black'/></svg>");
mask-repeat: no-repeat;
mask-size: var(--MaskSizeX);
transition-duration: 300ms;
transition-timing-function: ease-out;
flex-direction: column;
}
.smaller-mask {
mask-size: 0 !important;
}
.uc-x-main-back .t396,
.uc-x-main-face .t396 {
z-index: 0;
position: absolute;
}
.uc-x-block-back {
padding-bottom: 0px;
position: relative;
width: 100%;
height: 100%;
z-index: 9999;
}
.uc-x-block-back .t396,
.uc-x-block-face .t396,
.uc-x-ray-back .t396,
.uc-x-ray-face .t396 {
position: relative;
}
.uc-x-ray-back {
position: relative;
width: 100%;
height: 100%;
z-index: 999;
}
.uc-x-main-back {
pointer-events: none;
}
.uc-x-main-back .tn-elem {
pointer-events: all;
}
.uc-x-main-face {
position: relative;
z-index: 99;
height: 100%;
display: flex;
width: 100%;
flex-direction: column;
}
.uc-x-ray-face {
position: relative;
height: 100%;
width: 100%;
display: block;
z-index: 0;
}
.uc-x-block-face {
position: relative;
height: 100%;
display: block;
width: 100%;
position: relative;
height: 100%;
width: 100%;
display: block;
z-index: 1;
}
}
</style>
<script>
$('.uc-x-ray-back, .uc-x-block-back').wrapAll('<div class="uc-x-main-back"></div>');
$('.uc-x-ray-face, .uc-x-block-face').wrapAll('<div class="uc-x-main-face"></div>');
$('.uc-x-main-back').addClass('back-box');
$('.back-box-inside .tn-atom').addClass('back-box-atom');
const mask = document.querySelector('.back-box');
const contents = document.querySelectorAll('.back-box-inside');
let animationFrameId;
function handleMouseMove(event) {
cancelAnimationFrame(animationFrameId);
animationFrameId = requestAnimationFrame(function () {
const isLargerMask = mask.classList.contains('larger-mask');
// Размер маски в статичном состоянии (8) и при наведении (400)
const cursorSize = isLargerMask ? 400 : 8;
const rect = mask.getBoundingClientRect();
const offsetX = event.clientX - rect.left;
const offsetY = event.clientY - rect.top;
const centerX = offsetX - cursorSize / 2;
const centerY = offsetY - cursorSize / 2;
mask.style.maskPosition = `${centerX}px ${centerY}px`;
mask.style.maskSize = `${cursorSize}px`;
});
}
function handleMouseEnter() {
mask.classList.add('larger-mask');
}
function handleMouseLeave() {
mask.classList.remove('larger-mask');
}
function handleMouseOutOfPage(event) {
if (event.relatedTarget === null) {
mask.style.maskSize = '0px';
}
}
const links = document.querySelectorAll('a');
function handleLinkMouseEnter() {
mask.classList.add('smaller-mask'); // Добавляем класс для уменьшения размера маски
}
function handleLinkMouseLeave() {
mask.classList.remove('smaller-mask'); // Убираем класс для возврата к обычному размеру маски
}
links.forEach(link => {
link.addEventListener('mouseenter', handleLinkMouseEnter);
link.addEventListener('mouseleave', handleLinkMouseLeave);
});
document.addEventListener('mousemove', handleMouseMove);
contents.forEach(content => {
content.addEventListener('mouseenter', handleMouseEnter);
content.addEventListener('mouseleave', handleMouseLeave);
});
document.body.addEventListener('mouseout', handleMouseOutOfPage);
</script>