こんにちは！

Derek：）

もう半分過ぎて、16番目の投稿です.早く終わらせたいだけです.)
というシリーズと終わったracing carの連載もあるので忙しいですね!
まずは今日からDay 16計画を始めましょう🤭

16. Mouse Move Shadow

n/a.ターゲット

マウスの位置に応じてテキストシャドウの移動を実現します.
目に見える機能よりちょっと難しいです数学の...知識が必要です.
まず、HTMLの構成は以下の通りである.とても簡単です!

<div class="hero">
  <h1 contenteditable>🔥WOAH!</h1>
</div>

スタートパット

DerekとWes Bosの実装コード

const hero = document.querySelector(".hero");
const text = hero.querySelector("h1");

const WALK = 100;

hero.addEventListener("mousemove", shadow);

const shadow = (e) => {
  const width = hero.offsetWidth;
  const height = hero.offsetHeight;
  // this can be one line : const {offsetWidth: width, offsetHeight: height} = hero;

  let x = e.offsetX;
  let y = e.offsetY;
  // this can be one line : let {offsetX : x, offsetY: y} = e;

  if(this !== e.target){
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }

  const xWalk = Math.round((x / width * WALK) - (WALK / 2));
  const yWalk = Math.round((y / height * WALK) - (WALK / 2));

  text.style.textShadow = `${xWalk}px ${yWalk}px 0 red`;

}

関数が一つしかないので、心に負担はありません.よく見ます!

01.シャドウ生成関数

マウスの移動に基づいてシャドウ関数を作成します.

const hero = document.querySelector(".hero");
const text = hero.querySelector("h1");

hero.addEventListener("mousemove", shadow);

h1を囲むdivにアクティビティを登録しました
登録された関数は次のとおりです.

const WALK = 100;

const shadow = (e) => {
  const width = hero.offsetWidth;
  const height = hero.offsetHeight;

  let x = e.offsetX;
  let y = e.offsetY;

  if(this !== e.target){
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }

  const xWalk = Math.round((x / width * WALK) - (WALK / 2));
  const yWalk = Math.round((y / height * WALK) - (WALK / 2));

  text.style.textShadow = `${xWalk}px ${yWalk}px 0 red`;
}

以上のように、heroに関する横方向情報は、まずwidth及びheightに記憶される.
この構文は、次のように簡略化できます.

const {offsetWidth: width, offsetHeight: height} = hero;

以下、xとyも1本の線に縮めることができる.

let {offsetX : x, offsetY: y} = e;

私はどのように特定の名前でこの略語を形容するか分かりません.😅 ご存知の方がいらっしゃいましたら、メッセージをお愿いします:)
また、次のコードが存在する理由は、

if(this !== e.target){
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }

イベントが発生する要素はheroではなく、h1ラベルなので、私たちが望むe.targetに対して横と縦の長さを求めるだけなので、これは必要な制御文です.
その後のxWalkおよびyWalk変数は、中間を中心として、左側上端を(-50, -50)、右側下端を(50, 50)とするために必要な数式である.
実は私はあまり理解していません.乞食になったと理解しただけ...!

text.style.textShadow = `${xWalk}px ${yWalk}px 0 red`;

これにより、text.style.textShadowのプロパティ値を手動で簡単に調整できます.
数学の部分はよく説明されていない.どう見てもわかりません.
理解の達人達が待っていますね…!
エラーや修正が必要な場合は、いつでもフィードバックしてください.
ありがとう!🤗