【JavaScriptで魅せる】ウェブデザインを向上させる画像エフェクトの作り方

サムネイル
               

動きのあるウェブサイトはかっこいいですよね。今回は、JavaScriptを使用してウェブデザインを向上させるための画像エフェクトの作り方を紹介します。

 

 

「ホバー時の画像拡大」「フェードイン」「3D回転」「フリップ（反転）」など、さまざまなエフェクトを取り上げ、それぞれの実装方法と効果的な使用法について詳しく解説します。

 

 

 

【JavaScriptで魅せる】ウェブデザインを向上させる画像エフェクトの作り方

 

今回は私の自作WPテーマを参考に解説していきます。全ての画像エフェクトに使用しているHTMLです。

<section id="business" class="wrapper">
    <h2 class="section-title">
      <span class="en">MENU</span>
      <span class="ja">サービス内容</span>
    </h2>
    <div class="flex">
      <div class="left">
        <div class="item">
          <p class="title">Cut</p>
          <img src="<?php echo get_template_directory_uri(); ?>/img/business1.jpg" alt="" loading="lazy">
        </div>
        <div class="item">
          <p class="title">Eyelashes</p>
          <img src="<?php echo get_template_directory_uri(); ?>/img/business2.jpg" alt="" loading="lazy">
        </div>


      </div>
      <div class="right">
        <div class="item">
          <p class="title">Colouring</p>
          <img src="<?php echo get_template_directory_uri(); ?>/img/business3.jpg" alt="" loading="lazy">
        </div>
        <div class="item">
          <p class="title">Perm</p>
          <img src="<?php echo get_template_directory_uri(); ?>/img/business4.jpg" alt="" loading="lazy">
        </div>
      </div>
    </div>


  </section>

 

 

 

ホバーしたときに画像が拡大するシンプルなエフェクト

 

// 全ての.item要素を取得
var items = document.querySelectorAll(".item");


// 各要素に対して関数を適用
items.forEach(function (item) {
  // マウスが要素の上にあるとき
  item.addEventListener("mouseover", function () {
    // 画像を取得
    var img = this.querySelector("img");
    // 画像のクラスに'hover'を追加
    img.classList.add("hover");
  });


  // マウスが要素から離れたとき
  item.addEventListener("mouseout", function () {
    // 画像を取得
    var img = this.querySelector("img");
    // 画像のクラスから'hover'を削除
    img.classList.remove("hover");
  });
});

 

 

 

img {
  transition: transform 0.2s; /* アニメーション効果 */
}


img.hover {
  transform: scale(1.1); /* 拡大 */
}

 

ホバーしたときに画像がフェードインするエフェクト

 

// 全ての.item要素を取得
var items = document.querySelectorAll(".item");


// 各要素に対して関数を適用
items.forEach(function (item) {
  // マウスが要素の上にあるとき
  item.addEventListener("mouseover", function () {
    // 画像を取得
    var img = this.querySelector("img");
    // 画像のクラスに'fade'を追加
    img.classList.add("fade");
  });


  // マウスが要素から離れたとき
  item.addEventListener("mouseout", function () {
    // 画像を取得
    var img = this.querySelector("img");
    // 画像のクラスから'fade'を削除
    img.classList.remove("fade");
  });
});


img {
  opacity: 0.5; /* 初期状態では半透明 */
  transition: opacity 0.5s ease-in-out; /* アニメーション効果 */
}


img.fade {
  opacity: 1; /* フルオパシティ */
}

 

 

 

画像がマウスオーバー時に3D空間で回転するというエフェクト

 

// 全ての.item要素を取得
var items = document.querySelectorAll(".item");


// 各要素に対して関数を適用
items.forEach(function (item) {
  // マウスが要素の上にあるとき
  item.addEventListener("mouseover", function () {
    // 画像を取得
    var img = this.querySelector("img");
    // 画像のクラスに'rotate'を追加
    img.classList.add("rotate");
  });


  // マウスが要素から離れたとき
  item.addEventListener("mouseout", function () {
    // 画像を取得
    var img = this.querySelector("img");
    // 画像のクラスから'rotate'を削除
    img.classList.remove("rotate");
  });
});

 

img {
  transition: transform 1s; /* アニメーション効果 */
}


img.rotate {
  transform: rotateY(360deg); /* 3D回転 */
}

 

画像がマウスオーバー時にフリップ（反転）するというエフェクト

 

// 全ての.item要素を取得
var items = document.querySelectorAll(".item");


// 各要素に対して関数を適用
items.forEach(function (item) {
  // マウスが要素の上にあるとき
  item.addEventListener("mouseover", function () {
    // 画像を取得
    var img = this.querySelector("img");
    // 画像のクラスに'flip'を追加
    img.classList.add("flip");
  });


  // マウスが要素から離れたとき
  item.addEventListener("mouseout", function () {
    // 画像を取得
    var img = this.querySelector("img");
    // 画像のクラスから'flip'を削除
    img.classList.remove("flip");
  });
});

 

img {
  transition: transform 1s; /* アニメーション効果 */
}


img.flip {
  transform: rotateY(180deg); /* フリップ（反転） */
}

 

まとめ

ウェブデザインは、ユーザー体験を向上させ、ウェブサイトの目標達成に寄与する重要な要素です。

 

この記事では、JavaScriptを使用して実装できる様々な画像エフェクトを紹介しました。

 

これらのエフェクトは、ウェブサイトの視覚的魅力を高め、ユーザーの注目を引くことができます。

 

しかし、むやみやたらにエフェクトは使用すると、パフォーマンスやユーザビリティを損なうことがあるので注意。

 

これらのエフェクトを活用し、ウェブデザインの可能性を最大限に引き出しましょう。