日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。
今回は 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 クラスが追加され、画面の暗転が解除される。
今回はこれで以上になります。
あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。