JavaScriptで画像をフェードして切り替える方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで画像をフェードして切り替える方法について解説しています。画像のフェードはCSSのopacityプロパティを操作することで実装できます。setIntervalを使った画像切り替えの例をサンプルコードで見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで画像をフェードして切り替える方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

画像をフェードして切り替える方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

フェードとは

色や音などが弱まるという意味の言葉です。画像の表示で、フェードインというと徐々に現れることを指し、フェードアウトは反対に徐々に消えるという演出になります。

 

JavaScriptで画像をフェードして切り替える方法

HTML要素の不透明度を設定するopacityというCSSプロパティがあります。opacityは0〜1で設定ができ、0なら透明、1なら不透明となります。

フェードアウトするには、このopacityを徐々に0にすることで実現できます。

MDNのopacityのリファレンスはこちら

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

まずは準備として画像を2つ用意します。今回は、商用利用もOKなテストに便利な下記のサイトから画像を2つ用意しました。

https://unsplash.com/

HTMLでは、画像のimgタグにJavaScriptからのアクセス用にid名「targetImage」を割り当てています。

<img src="https://picsum.photos/id/1080/200" id="targetImage">

JavaScriptでは、クリック時に画像が切り替わるように「onclick」を使って画像を切り替える処理を呼び出しています。また、フェードアウトとフェードインの動作をopacityの数字を0.1づつ変えるために「setInterval」を使って100ミリ秒ごとに0.1変える処理を呼び出しています。

let intervalId;
let image = document.getElementById('targetImage');
image.onclick = changeImage;

function changeImage(){

  if(image.style.opacity == ''){
    image.style.opacity = 1;
  }

  let opacityInt = image.style.opacity * 100;
  //フェードアウトの処理(opacityを100ミリ秒ごとに0.1づつ減らす)
  let intervalId = setInterval( () => {
    opacityInt = opacityInt - 10;
    image.style.opacity = opacityInt / 100;

    if(image.style.opacity <= 0){
      clearInterval(intervalId);
      //画像を交換
      if(image.src === 'https://picsum.photos/id/1080/200'){
        image.src = 'https://picsum.photos/id/1039/200';
      }else{
        image.src = 'https://picsum.photos/id/1080/200';
      }

      opacityInt = image.style.opacity * 100;
      //フェードインの処理(opacityを100ミリ秒ごとに0.1づつ増やす)
      intervalId = setInterval( () => {
        opacityInt = opacityInt + 10;
        image.style.opacity = opacityInt / 100;
        if(image.style.opacity >= 1){
          clearInterval(intervalId);
        }
      }, 100);
    }
  }, 100);
}

これで画像をクリックすると、フェードアウトして他の画像がフェードインするようになりました。動作は下記のような形になります。

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。