日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。
今回は background-image プロパティの疑似アニメーション制御について
background-image プロパティは transition プロパティや animation プロパティ等のアニメーション制御には対応していません。
そこで、自分なりに試行錯誤することで、疑似的なアニメーション制御に成功したので、その方法などを記録していきます。
方法２：JavaScript の動的制御で２種類の background-image の opacity を同時に操作することで、疑似的なクロスフェードを実装する。
記述例
HTML
<html>
<body>
<div id="background1" class=""></div>
<div id="background2" class="none"></div>
<button id="change_screen" class="" type="button">背景変更</button>
</body>
</html>
CSS
body {
margin: 0;
}
#background1,
#background2 {
min-height: 100%;
min-width: 100%;
opacity: 1;
position: fixed;
transition: all 1s;
-webkit-transition: all 1s;
}
#background1 {
background-image: url(背景画像１)
}
#background2 {
background-image: url(背景画像２)
}
#background1.none,
#background2.none {
opacity: 0;
}
#change_screen {
position: relative;
}
javascript
jQuery(document).ready(function(){
$("#change_screen").click(function(){
$("#background1").toggleClass("none");
$("#background2").toggleClass("none");
});
});
解説
１・背景画像の表示専用の空の div タグを二種類を用意する。
２・予め片方の div タグにはクラス none を設定し、透過処理の初期設定を行う。
３・背景変更ボタンをクリックすると、toggleClass メソッドでそれぞれの div タグの none クラスが切り替わる。
４・それぞれの div タグの透明度が逆転し、transition プロパティによって、１秒間の間にそれぞれの背景がアニメーションすることで、結果的にクロスフェードする。
今回はこれで以上になります。
あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。