やるきなし

2017/06/13 09:41 / background-image transition

以下のようなやる気のない感じで背景画像を20秒間隔でクロスフェード(3.5秒)で切り替えるようなページを作っていたのだが，Chrome で表示する分には問題ないのだが，Chrome 以外だとことごとく無視されるということに気付く．

$(function(){
    cnt=1; t=0;
    body=$('body');
    arr=['bg0.jpg','bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg'];
    setInterval(function() {
        bg='url("images/'+arr[cnt++]+'")';
        if(cnt==arr.length)cnt=0;
        if(t==0){body.css('transition','background 3s linear 0.5s');t=1;}
        setTimeout(function(){body.css('background-image',bg);},3500);
    },20000);
});

どうやら background-image は animatable ではないというのが標準ならしい．Chrome でクロスフェードできていたのは，Chrome の勝手な実装によるものならしい．

ということで，div を2枚重ねして交互に画像そ差し替えつつ fadeIn()/fadeOut() するようにとりあえずjQueryで実装．その後，div を複数重ねてCSSのみでの実装例を見付けたので，CSSのみで実装(CSSが若干見通し悪くなるので，CSSを生成するスクリプトを書いた)．

参考にしたページ: