CSSで虫眼鏡効果を簡単に実装!初心者向け徹底解説&サンプルコード – JPSM

CSSで虫眼鏡効果を簡単に実装!初心者向け徹底解説&サンプルコード

CSSで作る虫眼鏡効果のサンプルイメージCSS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

CSSを使って、ウェブページに魅力的なエフェクトを追加したいと思っている初心者の皆さん、こんにちは!

今回は、初心者でも簡単にできる虫眼鏡効果(ズームイン・アウト)の作り方と使い方を徹底解説します。

また、無限ループする虫眼鏡効果や応用例もご紹介しますので、ぜひ最後までお読みください。

●虫眼鏡効果とは?

虫眼鏡効果とは、マウスオーバー(カーソルを合わせる)時に画像が拡大・縮小するエフェクトのことを指します。

これにより、ウェブページの画像にアクセントを付けたり、情報を際立たせることができます。

では、実際に作成していきましょう。

●虫眼鏡効果の作り方

ここでは、HTMLとCSSを使って虫眼鏡効果を実装していきます。

まずは、HTMLのコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>虫眼鏡効果のデモ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="magnifier">
        <img src="sample.jpg" alt="サンプル画像">
    </div>
</body>
</html>

次に、CSSのコードです。

style.cssファイルに下記のコードを記入してください。

.magnifier {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.magnifier img {
  width: 100%;
  transition: transform 0.3s;
}

.magnifier:hover img {
  transform: scale(1.5);
}

このCSSコードでは、.magnifierクラスを持つ要素(今回は<div>)の中の<img>要素に対して、次のことを行っています。

  1. 通常時(マウスオーバーしていない状態)では、画像の幅を100%に設定し、拡大・縮小のアニメーション時間を0.3秒に設定しています。
  2. マウスオーバー時には、画像の拡大率を1.5倍に変更しています。

以上で、虫眼鏡効果が完成しました。

試しに、マウスカーソルを画像に合わせてみてください。

画像がスムーズに拡大・縮小するエフェクトが実装されていることが確認できるはずです。

●虫眼鏡効果の応用例:無限ループ

さらに、虫眼鏡効果を無限ループさせる方法もご紹介します。こちらもCSSのみで実現できます。

次のコードをstyle.cssファイルに追加してください。

@keyframes loopMagnifier {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

.magnifier.loop img {
  animation: loopMagnifier 3s infinite;
}

.magnifier.loop:hover img {
  animation-play-state: paused;
}

このコードでは、@keyframesを使って、無限ループするアニメーションを定義しています。

アニメーションの名前はloopMagnifierで、以下の動作を行います。

  1. 0%と100%(アニメーションの開始と終了)では、画像の拡大率を1倍に設定しています。
  2. 50%(アニメーションの途中)では、画像の拡大率を1.5倍に設定しています。

また、.magnifier.loopクラスを持つ要素の<img>要素に対して、以下のことを行っています。

  1. アニメーションをloopMagnifierに設定し、アニメーション時間を3秒に設定し、無限ループさせています。
  2. マウスオーバー時には、アニメーションを一時停止させています。

HTMLにもloopクラスを追加して、次のように変更してください。

<div class="magnifier loop">
    <img src="sample.jpg" alt="サンプル画像">
</div>

これで、無限ループする虫眼鏡効果が実装されました。

マウスカーソルを合わせない状態では、画像が自動で拡大・縮小するアニメーションが無限ループします。

マウスカーソルを合わせると、アニメーションが一時停止します。

●応用例:複数の画像に虫眼鏡効果を適用する

さらに、複数の画像に虫眼鏡効果を適用する方法も簡単です。

HTMLの中で、複数の<div>要素に.magnifierクラスを付け、それぞれの<img>要素に画像ファイルを設定してください。

<div class="magnifier">
    <img src="sample1.jpg" alt="サンプル画像1">
</div>
<div class="magnifier">
    <img src="sample2.jpg" alt="サンプル画像2">
</div>
<div class="magnifier">
    <img src="sample3.jpg" alt="サンプル画像3">
</div>

これで、複数の画像に虫眼鏡効果が適用されます。

まとめ

この記事では、初心者向けにCSSを使った虫眼鏡効果の作り方と使い方を解説しました。

また、無限ループする虫眼鏡効果や複数の画像に効果を適用する方法もご紹介しました。

これであなたも、ウェブページに魅力的なエフェクトを追加できるようになります。

ぜひ、自分のウェブページにも虫眼鏡効果を取り入れて、訪問者に楽しい体験を提供してください。

この記事があなたのウェブデザインの助けになれば幸いです。