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

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

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

 

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

 

 

フェードとは

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

 

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

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

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

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

 

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

まずは準備として画像を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では、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

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