カーソルとエフェクトがズレている
test1.js(マウスの動きに合わせてエフェクトを動かすスクリプト)
検証(verificat)
verificat.js(各要素の値を表示させるスクリプトを用意)
test.html?jsSelecter=verificat(マウスオーバーで値を表示)
pageX Y は、マウスイベント発火時のドキュメント全体からの相対位置を取得する
イベントオブジェクトの target は、id=inner のタグを取得しているが、
offsetLeft Topの基準点が”親要素”になってしまっているようで、
補正する値が "0" になってしまっている
おそらく、id=border のタグと同じ値を取得できればズレはなくなる
基準点の違いがズレとして表われていることがわかった
なぜズレるか?
positon の値が原因かと仮定して検証してみたが、原因ではなかった
原因特定は別な機会に…
修正(fix)
test.html?jsSelecter=fix
fix.js (カーソルと位置を合わせる)
.getBoundingClientRect() を使うと画面基準の位置を取得できるので、
エフェクトをカーソルの位置と合わせて表示できるようになった
※しかし、この Portfolio のトップページに上記を実装しようとしたが、
なぜかマウスイベントが発火せず、実装できなかった…
後日調査して実装したい
参考になったサイト