初心者でもできる！マウス追従型マグネティックエフェクトの実装方法

CSS、JavaScript

ウェブサイトにインタラクティブな要素を加えることで、ユーザーの注目を引き、サイトの魅力を増すことができます。その一例として「マグネティックエフェクト」があります。このエフェクトでは、マウスの動きに合わせて要素が動き、まるで磁石に引き寄せられるような視覚的効果を提供します。今回は、HTML、CSS、そしてJavaScriptを使って、基本的なマグネティックエフェクトを実装し、その後カスタマイズ方法を紹介します。

マグネティックエフェクトとは？

マグネティックエフェクトは、要素がマウスの動きに反応して、まるで磁石のように引き寄せられるように見える効果です。このエフェクトをウェブサイトに追加することで、ユーザーのインタラクションを促し、サイトの動的な魅力を高めることができます。以下に、基本的な実装方法を紹介します。

簡単なマグネティックエフェクトのサンプルコードの掲載と説明

まず、基本的なマグネティックエフェクトを実装します。

HTMLコード

<div class="magnetic">Hover Me</div>

ここでは、<div>タグを使って「Hover Me」というテキストを表示する要素を作成します。class="magnetic"によって、後でCSSやJavaScriptでこの要素をスタイリング・操作します。

CSSコード

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0; /* 背景色 */
}

.magnetic {
  width: 150px;
  height: 50px;
  color: #3498db; /* テキストカラーを青に変更 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  border-radius: 5px;
  transition: transform 0.2s ease-out;
  position: relative;
  background: transparent; /* 背景色なし */
}
  • bodyタグで、要素を画面中央に配置しています。
  • .magneticクラスでは、ボタンのような形を作成し、青色のテキストを中央に表示させます。

JavaScriptコード

const magnetic = document.querySelector('.magnetic');

document.addEventListener('mousemove', (e) => {
  const rect = magnetic.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;

  // 吸い込まれるように動きを大きくする
  const deltaX = (e.clientX - centerX) * 1.2;  
  const deltaY = (e.clientY - centerY) * 1.2;

  magnetic.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});

magnetic.addEventListener('mouseleave', () => {
  magnetic.style.transform = 'translate(0, 0)';
});
  • マウスの動きに合わせて.magnetic要素が動きます。
  • mousemoveイベントで、マウスの位置と要素の中央を比較して、要素がその位置に引き寄せられるように動きます。
  • mouseleaveイベントで、マウスが要素から離れると、元の位置に戻ります。

サンプル

マウスカーソルの動きに合わせてdiv要素が追いかけます。

See the Pen magnetic-A by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

カスタマイズコードの掲載と説明

次に、エフェクトにアニメーションを追加して、視覚的な魅力を高めます。マウスオーバー時に円が拡大縮小を繰り返すアニメーションを実装します。

CSSのカスタマイズ

/* 円の拡大と縮小を繰り返すアニメーション */
@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  50% {
    transform: scale(5);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
}

.magnetic::after {
  content: '';
  position: absolute;
  background-color: rgba(52, 152, 219, 0.3); /* 円の色 */
  border-radius: 50%;
  width: 100px;
  height: 100px;
  transform: scale(0);
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform-origin: center;
  transition: transform 0.3s ease-out;
  margin-top: -50px;
  margin-left: -50px;
}

/* マウスオーバー時にアニメーションを適用 */
.magnetic:hover::after {
  animation: pulse 2s infinite; /* 円が拡大・縮小を繰り返す */
}
  • @keyframes pulseで、円が拡大・縮小するアニメーションを定義しています。0%から50%で拡大し、100%で元に戻ります。
  • .magnetic::afterで、要素の中央に円形のエフェクトを追加しています。この円は、マウスオーバー時にアニメーションで拡大・縮小を繰り返します。

JavaScriptのカスタマイズ

const magnetic = document.querySelector('.magnetic');

document.addEventListener('mousemove', (e) => {
  const rect = magnetic.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;

  // 吸い込まれるように動きを大きくする
  const deltaX = (e.clientX - centerX) * 1.2;  
  const deltaY = (e.clientY - centerY) * 1.2;

  magnetic.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
});

magnetic.addEventListener('mouseleave', () => {
  magnetic.style.transform = 'translate(0, 0)';
});

カスタマイズ例

例えば、円の大きさやアニメーションの速度を調整したい場合、以下部分を設定します。

.magnetic::after {
  width: 100px; /* 円の大きさを変更 */
  height: 100px;
}

/* マウスオーバー時にアニメーションを適用 */
.magnetic:hover::after {
  animation: pulse 2s infinite; /* 円が拡大・縮小を繰り返す */
}

サンプル〈カスタマイズ〉

ベースコードのときと同じでマウスカーソルの動きに合わせてdiv要素が追いかけますが、マウスカーソルがdiv要素の重なるとマウスオーバーのアニメーションが始まります。

See the Pen magnetic-Custom by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

まとめ

この記事では、マグネティックエフェクトの基本的な実装方法から、円が拡大縮小するアニメーションを追加したカスタマイズまでを紹介しました。

@keyframesやJavaScriptの動きの調整を駆使して、さらにインタラクティブなエフェクトを作り出すことができます。自分のサイトに合わせたカスタマイズを試して、より魅力的なユーザー体験を提供してみてください。

タイトルとURLをコピーしました