アニメーションカーソルがアンカーで動作しない

私は何時間も検索しましたが、答えが見つからないようです。私はこのcodepen https://codepen.io/Nharox/pen/akgEQmを画像とリンクで動作させるように調整しようとしていますが、2つのものは動作しません。 1つは、カーソルの位置がブラウザまたはマウスホイールのいずれかでスクロールした後にマウスポインタが垂直になるべき垂直位置に一致しないことと、リンクをクリックしても効果がないことです。私は理由を理解できないようだ。アニメーションカーソルがアンカーで動作しない

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

リンク

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

私は、任意のサイズで、ブラウザの幅のサイズ100％とした画像を必要としています。それ以外の点では、カーソルは正しく動作し、コードペインと同じように正確にアニメートされます。ちょうどクリック可能なリンクと間違ったyの位置。

出典

2017-06-27 cameron

まず、Yポジションを更新するためにイベントリスナーを登録していないため、Yポジションは正しいです。これまでのところ、マウスの入力、移動、離脱しかできませんでした。スクロール（カーソルイベントではない）に起因するカーソル位置の変化を考慮するには、scollイベントを登録してそれに応じてカーソルY位置の値を更新する必要があります。

第2に、アンカーは、干し草の針のように迷子になったため何もしません。それを動作させるには、アンカータグに "box"要素をラップすることができます。ここで

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

が変更された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;   
    } 
})  
})();

チェックアウトあなたは、私が行った変更を確認するために私が作成したpen

はここで変更されたHTMLです。

出典

2017-06-27 15:39:55 andrewkiri

問題を解決した場合は、必ず回答に印を付けてください。 – andrewkiri

ありがとうございます。これは、クロムとIEでは完全に機能していますが、Y位置はFireFoxでかなり正しく更新されません。 – cameron

私は少し前に少しのアプローチを試した後、この動作がFirefoxで可能かどうかは分かりません。 JavaScriptでそれを管理する一般的なアプローチは、あまり複雑な方法でユーザーのカーソル位置を操作するため、悪いと言います。ラッピングアンカーで '：hover' CSS疑似状態のアニメーションをトリガーすることをお勧めします。そうするとカーソルとスクロールがブラウザーとの互換性とともに説明されます。 – andrewkiri

アニメーションカーソルがアンカーで動作しない

答えて

関連する問題