独自のマウスカーソルを作成してウェブページを魅力的に!
ユーザーエクスペリエンスを向上させるために、ウェブサイトに独自の
マウスカーソルを導入する方法を紹介します。
本記事では、カーソルがマウスに追従する動きや、
リンクにホバーした際に見た目が変化する効果を実装する手順を詳しく解説します。
実装例
以下のコードでは、HTML、CSS、JavaScriptを使って独自のカーソルを作成します。
HTMLコード
まず、カーソルの基本となる要素とボタンリンクを用意します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Cursor with Hover Effects</title>
<style>
/* Custom mouse pointer */
.sample-cursor {
position: fixed;
top: -5px;
left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
transform: translate(0, 0);
pointer-events: none;
}
/* Changes appearance when hovering over a link */
.sample-cursor.sample-cursor--hover {
top: -20px;
left: -20px;
width: 40px;
height: 40px;
background: rgba(205, 114, 113, 0.5);
}
/* Button styling for demonstration */
.sample-btn {
display: inline-block;
min-width: 300px;
margin: 20px;
padding: 20px;
color: #fff;
background-color: #000;
font-size: 20px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
</style>
</head>
<body>
<div id="sampleCursor" class="sample-cursor"></div>
<a href="#" class="sample-btn">Sample Link</a>
<script>
// Get the div for the cursor
var sampleCursor = document.getElementById('sampleCursor');
// Make the div follow the mouse movement
document.addEventListener('mousemove', function (e) {
sampleCursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
});
// Add hover effect when hovering over links
var sampleLinks = document.querySelectorAll('a');
for (var i = 0; i < sampleLinks.length; i++) {
sampleLinks[i].addEventListener('mouseover', function () {
sampleCursor.classList.add('sample-cursor--hover');
});
sampleLinks[i].addEventListener('mouseout', function () {
sampleCursor.classList.remove('sample-cursor--hover');
});
}
</script>
</body>
</html>
コードの解説
HTML構成
<div id="sampleCursor">
:カーソルの動きに追従する要素。
<a href="#" class="sample-btn">
:ホバー時のカーソル効果を確認するためのボタンリンク。
CSSスタイル
.sample-cursor
固定位置でマウスに追従するカーソル。
背景色、サイズ、位置のアニメーション効果を定義。
.sample-cursor--hover
リンクホバー時の拡大効果を追加。
JavaScriptの動作
マウスの追従:mousemove
イベントでカーソル位置を更新。transform: translate()
を利用して滑らかに移動。
ホバー時の効果mouseover
イベントで .sample-cursor--hover
クラスを追加。mouseout
イベントでクラスを削除し、元のサイズに戻す。
カスタマイズのポイント
カーソルの色やサイズを変更するには、.sample-cursor
の background
や width
を編集。
ホバー時のエフェクトをアレンジする場合は、.sample-cursor--hover
のスタイルを調整。
まとめ
独自のカーソルを実装することで、ウェブサイトのデザイン性とユーザーエクスペリエンスを
大幅に向上させることができます。
本記事で紹介したコードを元に、自分のサイトに合ったカスタマイズを加えてみてください。
簡単な変更でもデザインに大きなインパクトを与えることができます。
ぜひ挑戦して、ウェブサイトをさらに魅力的にしてください!
複数の画像を個別に切り替える方法
2月 12, 2025ローディングをキャッシュで制御する方法
1月 15, 2025JavaScriptでスクロールに応じて要素を表示・非表示する方法
12月 17, 2024