Animierte Cursor funktioniert nicht mit Ankern

Ich habe stundenlang gesucht, aber ich kann nicht die Antwort finden. Ich versuche, diesen Codepen https://codepen.io/Nharox/pen/akgEQm mit Bildern und Links zu arbeiten, aber 2 Dinge funktionieren nicht. Einer ist, dass die Position des Cursors nicht vertikal übereinstimmt, wo der Mauszeiger nach dem Scrollen mit dem Browser oder dem Mausrad sein sollte, und der andere ist, dass das Klicken auf den Link keinen Effekt hat. Ich kann nicht herausfinden, warum.Animierte Cursor funktioniert nicht mit Ankern

<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>

Verbindungen

<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; 
    } 
} 
}

(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); 
} 
})();

muss ich die Bilder in jeder Größe 100% der Größe des Browser-Breite sein. Der Cursor funktioniert ansonsten ordnungsgemäß und animiert genau wie der Codepen. Nur kein klickbarer Link und falsche y-Position.

Quelle

2017-06-27 cameron

Erstens ist die Y-Position korrekt, da Sie keinen Ereignis-Listener registriert haben, um Ihre Y-Position entsprechend zu aktualisieren. Bisher haben Sie nur Maus - Ereignisse eingeben, verschieben und verlassen. Um die Änderung der Cursorposition zu berücksichtigen, die aufgrund des Scrollens auftritt (was übrigens kein Cursor-Ereignis ist), müssen Sie ein Scoll-Ereignis registrieren und den Y-Positionswert des Cursors entsprechend aktualisieren.

Zweitens macht der Anker nichts, weil er als Nadel im Heuhaufen verloren gegangen ist. Damit es funktioniert, können Sie Ihr "box" -Element in den Anchor-Tag einfügen. Hier

ist die geänderte 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>

Hier ist die geänderten 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;   
    } 
})  
})();

Schauen Sie sich die pen, die ich für Sie erstellt die Änderungen zu sehen, die ich gemacht habe.

Quelle

2017-06-27 15:39:55 andrewkiri

Bitte, stellen Sie sicher, eine Antwort zu markieren, wenn es Ihr Problem gelöst hat – andrewkiri

Vielen Dank. Dies funktioniert perfekt in Chrome und IE, obwohl die Y-Position in FireFox nicht ganz richtig aktualisiert wird. – cameron

Ich bin mir nicht sicher, ob dieses Verhalten in Firefox behoben werden kann, nachdem ich vor einiger Zeit einige Ansätze versucht habe. Der allgemeine Ansatz, es mit JavaScript zu verwalten, würde ich als schlecht bezeichnen, weil Sie die Cursor-Position des Benutzers zu komplex manipulieren. Ich würde vorschlagen, Animation auf ': Hover' css Pseudo-Zustand auf Wrapping-Anker, so dass der Cursor und Scrolling zusammen mit Browser-Kompatibilität berücksichtigt werden. – andrewkiri

Animierte Cursor funktioniert nicht mit Ankern

Antwort

Verwandte Themen