Animated cursor not working with anchors
Question
I've searched for hours but can't seem to find the answer. I'm trying to adapt this codepen https://codepen.io/Nharox/pen/akgEQm to work with images and links but 2 things are not working. One is that the position of the cursor doesn't match vertically where the mouse pointer should be after scrolling with either the browser or the mouse wheel, and the other is that clicking the link has no effect. I can't seem to figure out why.
<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);
}
})();
I need the images to be 100% the size of the browser width at any size. The cursor is otherwise working properly and animating exactly as the codepen. Just no clickable link and wrong y position.
1 answers
solution1
0 ACCPTED 2017-06-27 15:39:55
Firstly, the Y position is correct since you didn't register an event listener to update your Y position accordingly. So far you have only mouse - enter, move and leave events. To account for cursor position change that occurs due to scrolling (which is btw not a cursor event) you need to register a scoll event and update the cursor Y position value accordingly.
Secondly, the anchor doesn't do anything because it got lost as needle in the haystack. To make it work you can wrap your "box" element in anchor tag.
Here is the changed HTML:
<a href="www.google.com" target="_blank">
<div class="myrow">
<div class="myrow__box">
<img alt="" src="https://www.easyjet.com/en/holidays/shared/images/guides/austria/vienna.jpg" />
</div>
</div>
</a>
Here is the changed JS:
(function showCursor() {
'use strict';
// Variables
var boxes = document.querySelectorAll('.myrow__box'),
cursor = document.querySelector('.cursor'),
boxPos = [],
scrollY = 0;
// 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 + scrollY;
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);
}
window.addEventListener('scroll', function (event) {
if(event.target.scrollingElement.localName == "body") {
scrollY = event.target.scrollingElement.scrollTop;
}
})
})();
Check out the pen that I created for you to see the changes that I've made.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.