Result

マウスを目線が追う的なやつです。👆こういうの。

必要性はさほど高くはないかもですが、嫌でも目に付きますし、表現の仕方次第ですが、例えば長いローディング時のユーザーへの苛立ちを抑えたり、バナーや問い合わせ等に自然に誘導が出来るかも。

javascript

 //両目となる要素を指定let eyeball_left = document.querySelector(".eyeball_left"),pupil_left = document.querySelector(".pupil_left"),//円の半径を取得して、円の中心を探すeyeArea_left = eyeball_left.getBoundingClientRect(),pupil_leftArea = pupil_left.getBoundingClientRect(),R_left = eyeArea_left.width / 2,r_left = pupil_leftArea.width / 2,centerX_left = eyeArea_left.left + R_left,centerY_left = eyeArea_left.top + R_left; let eyeball_right = document.querySelector(".eyeball_right"),pupil_right = document.querySelector(".pupil_right"),eyeArea_right = eyeball_right.getBoundingClientRect(),pupil_rightArea = pupil_right.getBoundingClientRect(),R_right = eyeArea_right.width / 2,r_right = pupil_rightArea.width / 2,centerX_right = eyeArea_right.left + R_right,centerY_right = eyeArea_right.top + R_right;//ポインタと眼球の中心との間の距離を求め、2点間の角度を返す事で瞳孔を眼球の内側に配置する。document.addEventListener("mousemove", (e) => {let x_left = e.clientX - centerX_left,y_left = e.clientY - centerY_left,theta_left = Math.atan2(y_left, x_left),angle_left = (theta_left * 180) / Math.PI + 360; let x_right = e.clientX - centerX_right,y_right = e.clientY - centerY_right,theta_right = Math.atan2(y_right, x_right),angle_right = (theta_right * 180) / Math.PI + 360;//styleプロパティで、瞳孔がカーソルを追従するように移動・回転させる。pupil_left.style.transform = `translateX(${R_left - r_left + "px"}) rotate(${angle_left + "deg"})`;pupil_left.style.transformOrigin = `${r_left + "px"} center`;pupil_right.style.transform = `translateX(${R_right - r_right + "px"}) rotate(${angle_right + "deg"})`;pupil_right.style.transformOrigin = `${r_right + "px"} center`;});

配置はCSSで適当に。

html

<div class="container"><svg width="100" height="100" class="eye"><circle cx="50" cy="50" r="50" fill="white" class="eyeball_left" /><circle cx="50" cy="50" r="20" fill="#0D0D20" class="pupil_left" /></svg><svg width="100" height="100" class="eye"><circle cx="50" cy="50" r="50" fill="white" class="eyeball_right" /><circle cx="50" cy="50" r="20" fill="#0D0D20" class="pupil_right" /></svg></div>

目はSVGで作成されています。

via

Make SVG follow cursor using CSS and JS

[PR]