ウェブサイト作成用備忘録・１号：background-image の疑似アニメーション制御その１ #JavaScript

日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。

今回は background-image プロパティの疑似アニメーション制御について

background-image プロパティは transition プロパティや animation プロパティ等のアニメーション制御には対応していません。

そこで、自分なりに試行錯誤することで、疑似的なアニメーション制御に成功したので、その方法などを記録していきます。

方法１：JavaScript の動的制御で画面を暗転させ、background-image を変更してから setTimeout() メソッドで画面の暗転を解除する

記述例

HTML

<html>
  <body id="background" class="">
    <div id="hide_screen" class="none"></div>
    <button id="change_screen" class="" type="button">背景変更</button>
  </body>
</html>

CSS

body {
  margin: 0;
}

#hide_screen {
  min-height: 100%;
  min-width: 100%;
  background-color: #000;
  position: fixed;
  z-index: 2;
  transition: all .5s;
  -webkit-transition: all .5s;
}

#hide_screen.none {
  opacity: 0;
  pointer-events: none;
}

#background {
  background-image: url(背景画像１)
}

#background.change {
  background-image: url(背景画像２)
}

#change_screen {
  display: relative;
}

javascript

jQuery(document).ready(function(){

  $("#change_screen").click(function(){
    $("#hide_screen").removeClass("none");
    setTimeout(function(){
      $("#background").toggleClass("change");  
    },1000);
    setTimeout(function(){
      $("#hide_screen").addClass("none");
    },1000);
  });

});

解説

１・背景色を黒に設定した空の div タグで画面全体を覆い隠す。

２・予めクラス none を設定し、透過処理の初期設定を行う。

３・背景変更ボタンをクリックすると、none クラスが解除され、画面全体が暗転する。

４・次に、setTimeout() で、最初に背景変更ボタンを押してから１秒後に toggleClass メソッドで body タグの change クラスを切り替え、画面暗転後に背景画像を変更する。

５・最後に setTimeout() で最初に背景変更ボタンを押してから２秒後に再び none クラスが追加され、画面の暗転が解除される。

今回はこれで以上になります。

あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。