プログラミング初心者にとって、実際に動くものを作ってみることは、プログラミングスキルを向上させるために必要だと思います。当サイトではそのネタを他の記事でも提供しています。今回はネタとして、HTMLとCSSとJavaScriptでマウスカーソルを追従する要素を実装したので紹介します。
目次
実装した際の表示
プログラミング初心者の方やスマホ状態では確認することができないためスマホでこの記事を見ている方にも、文字だけでも想像しやすいように説明をします。PC環境だと一目瞭然なので、PCで見れる方はPCの方がわかりやすいです。
マウスに追従する円形の要素が表示される
実装すると、画面上に小さな半透明の円形が表示され、ユーザーがマウスを動かすと、そのカーソルに追従して動きます。これにより、ユーザーは自分のマウスの動きに合わせて、ページ上の要素が動く様子を直感的に感じることができます。
リンクにマウスを乗せると追従する円形の要素の色が変わる
さらに、ページ内のリンクにマウスカーソルを合わせると、追従する要素の色がピンク色に変わり、リンクから離れると元の色（ダークグレー）に戻ります。これは、ページ上の特定の部分にユーザーが触れたときに、何かが起こるという印象を与え、ユーザーの興味を引くことができます。
ソースコード例
プログラミング初心者の皆さんにも理解しやすいように、ここでは提供されたソースコードの各部分を分かりやすく解説します。HTMLとCSSは少ないので非常に簡単だと思います。
HTMLソースコード例
下記ソースコードがマウスカーソルに追従する要素になります。
<div id="follow-element"></div>CSSソースコード例
#follow-element {
position: fixed;
width: 30px; /* 追従要素の横幅を指定 */
height: 30px; /* 追従要素の高さを指定 */
background-color: #333; /* 追従要素の色を指定 */
opacity: 0.7; /* 追従要素の横幅を透過0に近づくほど薄くなります */
border-radius: 50%; /* 追従要素を円形にします */
transform: translate(-50%, -100%); /* 追従要素がマウスカーソルの中心にくるようにしています */
transition: all 0.5s ease-out; /* 追従要素の移動スピードの指定 */
pointer-events: none; /* 追従要素と重なったリンクをクリックできるようにしています */
z-index: 10000; /* 追従要素が他の要素よりも前面にくるように大きめの値を指定 */
}JavaScriptソースコード例
JavaScriptを使ってこの円形の要素に動きを加えます。
document.addEventListener('DOMContentLoaded', function () {
const followElement = document.getElementById('follow-element');
const links = document.querySelectorAll('a');
links.forEach(link => {
// リンクにマウスカーソルが乗った時
link.addEventListener('mouseover', function() {
followElement.style.backgroundColor = '#f0f';
});
// リンクからマウスカーソルが離れた時
link.addEventListener('mouseout', function() {
followElement.style.backgroundColor = '#333';
});
});
document.addEventListener('mousemove', function (e) {
const mouseX = e.clientX; // マウスカーソルの現在の画面上のX座標を取得
const mouseY = e.clientY; // Y座標を取得
followElement.style.left = mouseX + 'px';
followElement.style.top = mouseY + 'px';
});
});
