I've spent hours searching for a solution but I can't seem to find one. I'm attempting to modify the codepen found at https://codepen.io/Nharox/pen/akgEQm to incorporate images and links, however, two issues are arising. The first issue is that the cursor's vertical position doesn't align correctly after scrolling with either the browser or mouse wheel. The second problem is that clicking on the link has no effect. I'm baffled as to why this is happening.
<body>
<div class="cursor hidden">
<div class="cross">
<div class="b b1"></div>
<div class="b b2"></div>
</div>
<svg class="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="52" height="52" viewBox="0 0 52 52">
<path d="M1,26a25,25 0 1,0 50,0a25,25 0 1,0 -50,0"/>
</svg>
</div>
Links
<div class="myrow">
<div class="myrow__box">
<a href="/link-to-page"><img alt="" src="/images/myimage.jpg" /></a>
</div>
</div>
SCSS
.cursor {
position: absolute;
z-index: 5;
width: 50px;
height: 50px;
opacity: 0;
transform: translate3d(-50%, -50%, 0) scale(.9) rotate(135deg);
transition: opacity 0.5s, transform 0.5s;
pointer-events: none;
&:before, &:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 3px;
background-color: white;
transition: width 0.5s;
}
&:before {
transform: translate3d(-50%, -50%, 0);
}
&:after {
transform: translate3d(-50%, -50%, 0) rotate(90deg);
transform-origin: center;
}
svg {
fill: transparent;
stroke: white;
stroke-width: 3;
stroke-dasharray: 160;
stroke-dashoffset: 160;
overflow: visible;
transition: stroke-dashoffset 0.5s;
}
&-is-visible {
opacity: 1;
transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg);
&:before, &:after {
width: 22px;
}
svg {
stroke-dashoffset: 0;
}
}
}
.myrow {
display: block;
max-width: 100%;
margin: 0 auto;
&__box {
cursor: none;
position: relative;
height: auto;
transform: scale(1);
&:active {
&:before {
background-color: rgba(black, 0.15);
}
}
&:before {
content: '';
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(black, 0);
transition: background-color 0.3s;
}
}
}
JS
(function showCursor() {
'use strict';
// Variables
var boxes = document.querySelectorAll('.myrow__box'),
cursor = document.querySelector('.cursor'),
boxPos = [];
// Get coordinates for the current cursor position
function getPos(e, el) {
var xPos = 0,
yPos = 0;
xPos = (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos = (el.offsetTop - el.scrollTop + el.clientTop);
var mouseX = e.clientX - xPos,
mouseY = e.clientY - yPos;
cursor.style.top = '' + mouseY + 'px';
cursor.style.left = '' + mouseX + 'px';
}
// Add event listeners and call fns for the corresponding box
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener('mousemove', function(event) {
var currentBox = this;
boxPos = getPos(event, currentBox);
}, false);
boxes[i].addEventListener('mouseenter', function() {
this.appendChild(cursor);
setTimeout(function() {
cursor.classList.add('cursor-is-visible')
}, 10);
}, false);
boxes[i].addEventListener('mouseleave', function() {
cursor.classList.remove('cursor-is-visible');
}, false);
}
})();
The images need to adjust in size to be 100% of the browser window width regardless of its dimensions. The cursor itself is functioning properly and animating as expected per the codepen example. However, the link remains unclickable and the y-position is not correct.