Javascriptでホバーアニメーションの実装

2024.03.03

はじめに

概要

Javascriptで要素をホバーした際にイベントを発火させる実装をしていきます。CSSでも可能ですが、Javascriptのイベントのほうがより柔軟に対応が可能です。今回はshinyクラスを予め設定し、イベントの発火と共にクラスを付与して、その要素を光らせるアニメーションを実装していきます。

目的

実装内容
コード
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装内容

画像をホバーすると画像が「きらり」と光ります。

コード

HTML

<body class="hover-shiny">

	<main class="content">

		<div class="content__box flex-column">

			<div class="content__img">

				<img src="https://picsum.photos/1000/500?random=1" alt="サンプル画像">

			</div><!-- /.content__img -->

			<div class="content__img">

				<img src="https://picsum.photos/1000/500?random=2" alt="サンプル画像">

			</div><!-- /.content__img -->

			<div class="content__img">

				<img src="https://picsum.photos/1000/500?random=3" alt="サンプル画像">

			</div><!-- /.content__img -->

		</div><!-- /.content__box -->

	</main>

</body>

CSS(SCSS)

.hover-shiny {
  .content {
    &__box {
      row-gap: 30px;
      margin-bottom: 30px;

      @include mq(md) {
        flex-direction: row;
        justify-content: space-between;
      }
    }

    &__img {
      aspect-ratio: 1/0.8;

      @include mq(md) {
        width: 31%;
      }
    }
  }
}

shiny class

.shiny {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);

    /* アニメーション */
    animation-name: shiny;
    animation-deay: -1s;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
  }
}

@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;

  }

  30% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }

  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}

解説

このコードは、HTML要素に「光る」効果を追加するためのCSSです。具体的には、.shinyクラスを持つ要素にグラデーションの光をアニメーションで表示します。

`shiny`

position: relative; : 要素を相対位置に設定します。これにより、::after 疑似要素が親要素に対して絶対位置で配置されます。
overflow: hidden; : 子要素が親要素の範囲外に出た場合に非表示にします。これは、疑似要素が初期位置で親要素の外にあるため、見えないようにするためです。

`after(疑似要素)`

content: ''; : 疑似要素の内容を空に設定します。これは、実際のコンテンツではなく装飾用です。
position: absolute; : 親要素に対して絶対位置で配置します。
top: -100px; left: -100px; : 親要素の左上から-100pxの位置に配置します。これは疑似要素を初期に親要素の外側に配置するためです。
width: 50px; height: 50px; : 疑似要素のサイズを指定します。
background-image: linear-gradient(...); : 疑似要素の背景にグラデーションを設定します。このグラデーションは、透明から不透明へと変化することで「光る」効果を生み出します。
animation-name: shiny; : アニメーションの名前を指定します。
animation-delay: -1s; : アニメーションが開始するまでの遅延時間を設定します。ただし、ここにはタイプミスがあります。正しくは animation-delay です。
animation-duration: 2s; : アニメーションの持続時間を指定します。
animation-timing-function: ease-in-out; : アニメーションの速度曲線を指定します。
animation-iteration-count: 1; : アニメーションが実行される回数を指定します。

`@keyframes shiny`

アニメーションの動きを定義します。

0%, 30% : アニメーション開始時と30%の地点で、疑似要素はスケール0（見えない）であり、透明度も0です。
50% : 中間点で、疑似要素は元のサイズ（スケール1）になり、完全に不透明（透明度1）です。これが「光る」効果のピークです。
100% : 最終的に、疑似要素は非常に大きく拡大され（スケール50）、再び透明になります。

このアニメーションは、指定された時間（2秒）の間に一度だけ実行され、「光る」効果を生成します

Javascript

<script>
	document.addEventListener('DOMContentLoaded', function() {
		// '.coding__img'クラスを持つすべての要素を取得
		var codingImgs = document.querySelectorAll('.content__img');

		// 各要素にイベントリスナーを設定
		codingImgs.forEach(function(img) {
			img.addEventListener('mouseover', function() {
				// マウスが乗った要素にのみ'shiny'クラスを追加
				this.classList.add('shiny');
			});

			img.addEventListener('mouseout', function() {
				// マウスが離れたら'shiny'クラスを削除
				this.classList.remove('shiny');
			});
		});
	});
</script>

解説

このJavaScriptコードは、ウェブページ上で特定の画像にマウスを乗せたり離したりする際に、ビジュアル効果を適用するためのものです。コードの動作を順に説明します：

DOMContentLoadedイベントのリスナーを追加:
- document.addEventListener('DOMContentLoaded', function() {...});は、ウェブページのDOM（Document Object Model）が完全に読み込まれて操作可能になった時点で指定された関数を実行するようブラウザに指示します。これにより、スクリプトがDOM要素を安全に操作できるようになります。
特定の要素を選択:
- var codingImgs = document.querySelectorAll('.content__img');は、CSSクラス.content__imgを持つすべての要素を選択し、それらをcodingImgs変数に格納します。この選択された要素は、画像などのビジュアルコンテンツを指すことが多いです。
イベントリスナーの設定:
- codingImgs.forEach(function(img) {...});は、codingImgs変数に格納された各要素に対して、繰り返し処理を行います。この処理の中で、各要素（img）に二つのイベントリスナーが設定されます。
マウスオーバー時の動作:
- img.addEventListener('mouseover', function() {...});は、マウスポインタが要素の上に乗った時に発生するmouseoverイベントに対するリスナーを追加します。このイベントが発生すると、対象の要素（このコンテキストではthisで参照される）にshinyクラスが追加されます。これにより、その要素はCSSを通じてビジュアル的に「光る」または他のスタイル変更を受けることができます。
マウスアウト時の動作:
- img.addEventListener('mouseout', function() {...});は、マウスポインタが要素から離れた時に発生するmouseoutイベントに対するリスナーを追加します。このイベントが発生すると、shinyクラスが要素から削除されます。これにより、要素はマウスオーバー前のビジュアルスタイルに戻ります。