[JavaScript30] 🖱 16. Mouse Move Shadow

15863 ワード
JavaScript javascript30 テキストリンク

🖱 16. Mouse Move Shadow


マウスの移動に伴ってテキストシャドウが生成されます.

イニシャルコード
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Shadow</title>
</head>
<body>
    <div class="hero">
        <h1 contenteditable>🔥WOAH!</h1>
    </div>

    <style>
        html{
            color:#000;
            font-family:sans-serif;
        }
        body{
            margin: 0;
        }
        .hero{
            min-height:100vh;
            display:flex;
            justify-content: center;
            align-items: center;
            color:#000;
        }
        h1{
            text-shadow: 10px 10px 0 rgba(0,0,0,1);
            font-size:100px;
        }
    </style>
    <script>

    </script>
</body>
</html>
初期画面

🌏 プロセス


👉 1.変数の宣言

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 500; // 100px;
heroクラス、h 1ラベルを取得します.
walkは移動範囲です

👉 2.シャドウを作成する関数を作成し、座標値基準を設定する

function shadow(e){
            // console.log(e);
            const {offsetWidth:width, offsetHeight: height} = hero;
            let {offsetX: x, offsetY: y} = e;
            // console.log(x, y);
    
    		// this는 <div class="hero">, target은 h1
            if(this !== e.target){
                x = x + e.target.offsetLeft;
                y = y + e.target.offsetTop;
            }

👉 ES 6構造配分

const width = hero.offsetWidth;
const height = hero.offsetHeight;
上の2行.
const {offsetWidth:width, offsetHeight: height} = hero;
1行にマージできます.
  • は幅をオフセットし、オフセット高さはborderなどの長さの幅、高さを含む.
    • マウス位置は
  • x,y,
  • 現在のマウス位置がヒーロークラスのh 1ラベルにある場合、参照が返されます.

    • 👉 3.マウス移動時の文字位置、色設定。

    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 rgba(255, 0, 255, 0.7),
    ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
    ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
    ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
    `;
}
    h 1ラベルのシャドウを設定します.

    👉 4.関数呼び出し

    hero.addEventListener('mousemove', shadow);
    マウスが移動するとshadow関数を実行します.
    [SQL] Workbench Exaplain, Nested-Loop Join, Block Nested-Loop Join
    [Laravel]Laravell条件レンダリング