[JS] Day16 - Mouse Move Shadow
6244 ワード
demo:
https://Danji-ya.github.io/JS_javascript30/16-MouseMoveShadow/
github:
https://github.com/Danji-ya/JS_javascript30/tree/main/16-MouseMoveShadow
Day16 - Mouse Move Shadow
🎯 機能要件
🚀 学識
mousemoveによるtextshadowの変更
全体を囲む
hero divmousemoveイベントリスナーを装着するとh1領域もbublingによりイベントが発生し、オフセットXとオフセットYの値を測定する要素も変化します.したがって,値の変動幅は大きく変化し,以下のようになる.
そうでなければ
hero divif(this !== e.target){
x += e.target.offsetLeft;
y += e.target.offsetTop;
}.hero {
position: relative;
}offsetParentエレメント上部までの距離 e.target.offsetTopと左側を基準とした距離e.target.offsetLeftにより、値の変動幅を自然に大きくする.offsetParent規格は以下の3つの1つに属する.
<td>私<th>もしくは<table><body> 
また、現在xとyの値はビューポートの高さ、幅と等しいため、シャドウの表示時に幅を小さくするため、xとyの値を中心の最小-50最大50に対して最大50にするには、以下の式が用いられている.
const maxValue = 100;
x = Math.round((x / width) * maxValue - maxValue/2);
y = Math.round((y / height) * maxValue - maxValue/2);
text.style.textShadow = `
${x}px ${y}px 0 rgba(255,0,255,0.7),
${x*-1}px ${y*-1}px 0 rgba(0,255,255,0.7),
${x}px ${y * -1}px 0 rgba(122,122,255,0.7),
${x * -1}px ${y}px 0 rgba(155,155,155,0.7)
`;Reference
この問題について([JS] Day16 - Mouse Move Shadow), 我々は、より多くの情報をここで見つけました https://velog.io/@jiseong/JS-Day16-Mouse-Move-Shadowテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol