customer cursor

30日間s 30 submitsのCustomer cursorコースでまとめた記事です.
▶すべてのコードを表示する
きほんコード
html

  <section class="container">
    <h1>Hello World?</h1>
  </section>

  <div class="cursor"></div>

css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
section{
  min-height: 100vh;
  background-color: rgb(41, 42, 46);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  border: 1.5px solid white;
  width: 30px;
  height: 30px;
  border-radius: 50px;
}

1.マウスの移動に応じてdiv.cursorを移動します。

1-1. mouseoverイベント

const cursor = document.querySelector('.cursor');

window.addEventListener('mousemove', (e) => {
  console.log(e)
})

MouseEvent {isTrusted: true, screenX: 152, screenY: 314, clientX: 172, clientY: 260, …}

CallSolウィンドウに出力されたMouseEventのオブジェクトを開き、PageXメソッド、PageYメソッドを表示します.これを使用すると、div要素をマウスの移動に伴って移動できます.

window.addEventListener('mousemove', (e) => {
  console.log(e.pageX, e.pageY)
})

出力結果を表示すると、マウスの移動に伴って値が変化することがわかります.

window.addEventListener('mousemove', (e) => {
  cursor.style.left = e.pageX + 'px'
  cursor.style.top = e.pageY + 'px'
})

2.マウスカーソルでdiv.cursorを中心に

カーソル要素はマウスの移動に伴って動的に移動しますが、マウスはカーソル要素の中央にありません.
この問題はcssで修復できます.div.cursor要素にtransfor: translate(-50%, -50%);を提供します.

.cursor {
  position: absolute;
  left: 0;
  top: 0;
  border: 1.5px solid white;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  transform: translate(-50%, -50%);  
}

3、問題を改善する

index.htmlにsection要素を追加し(高さを増やすため)、マウスをスクロールすると、マウスがスクロールしている間にカーソル要素が停止しているのが見えます.

この問題は、スクロールイベントを使用して解決できます.

const cursor = document.querySelector('.cursor');

window.addEventListener('mousemove', (e) => {
  cursor.style.left = e.pageX + 'px'
  cursor.style.top = e.pageY + 'px'
})

window.addEventListener('scroll', () => {
  cursor.style.top = scrollY + 'px'
})

ただし、上にコードを記述すると、スクロールするとカーソルが画面の上部に表示されますが、コンソールウィンドウでスクロール値(次のコードなど)を表示すると、カーソルが画面の上部に表示されますが、スクロールすると値が変化します.

window.addEventListener('scroll', () => {
  cursor.style.top = scrollY + 'px'
  console.log(scrollY)
})

4.カーソルと上部の間隔をとる

これは、エレメントの上部位置とウィンドウの上部位置が異なるため、カーソルエレメントの上部位置とウィンドウウィンドウウィンドウの間のギャップを求めることで解決できます.cursor.offsetTop - scrollY
setAttrbuteでは、このように解くカーソルと上部との間隔をcursorのdata-fromtop値に設定します.スクロールするたびに、これらの設定値が入力され、スクロールの変更に伴ってカーソル要素が動的に移動するように設定されます.

window.addEventListener("mousemove", (e) => {
  cursor.style.left = e.pageX + "px";
  cursor.style.top = e.pageY + "px";
  cursor.setAttribute("data-fromTop", cursor.offsetTop - scrollY);
});

window.addEventListener("scroll", () => {
  const fromTop = cursor.getAttribute("data-fromTop");
  cursor.style.top = scrollY + parseInt(fromTop) + "px";
});

offsetTop
親要素の相対上部座標を返します.ここで重要なのは、位置に関連する親要素のみを基準として検索することです.親要素の位置が関係していない場合は、最上位domに対する座標を返します.絶対座標です.
スクロールサイズ
一部の要素では、コードを実行することなく、スクロールバー(htmlなど)が自動的に追加されます.ただし、他の要素は、スクロールするにはcss Of overflowプロパティを使用する必要があります.
通常、Webにはhtmlの要素があると信じています.ブラウザのビューで要素をスクロールします.(ie 6以前のバージョンはブレンドモードで実行されています.body、これもビューポートサイズを計算したコードです.else whyの場合)したがって、垂直スクロールバーを持つページの総高さはdocumentです.documentElement.スクロール高さ.

5.クリック時にクラスを付与

clickクラスをcursor要素に追加し、クリックが発生したときに事前定義されたclickクラスのスタイルを適用します.

window.addEventListener("click", () => {
  if (cursor.classList.contains("click")) {
    cursor.classList.remove("click");
    void cursor.offsetWidth; // trigger a DOM reflow
    cursor.classList.add("click");
  } else {
    cursor.classList.add("click");
  }

Dom Reflow
[再生](Playback)は、すべてのエンティティの位置と長さを再計算し、ドキュメントの一部またはすべてを再レンダリングします.
個々のエンティティを変更すると、子エンティティまたは親エンティティに影響を与える可能性があります.
参考資料
だからトップはどこだ?getBoundingClientRect().top element.オフセット先端の違い
How To Make A Custom Cursor For Website