2014-05-14

背景画像をtransitionさせ続ける

JavaScriptで背景画像を動かすだけで怒られる。CSSでやればJavaScriptを無効にされても動かせるので、もっと怒られるのかもしれない。いちいちCSSアニメーションを書くのは面倒なので、transitionプロパティーを使ってインスタントに動かせるような工夫を考えた。

Demo: Animated Background

ループできないtransitonプロパティーで擬似的に永続アニメーションを提供するには、transition-durationプロパティーで大きな値を指定すれば良い。またアニメーションの開始に必要になるトリガーは主に擬似クラスを利用することになるが、body要素に:hover擬似クラスを直接使うとアニメーションをうまく起こせない問題があり、:target擬似クラスではIDの指定とURLが限定される問題がある。ルートのhtml要素に:hoverを指定することで、この二つの問題は解決できる。あとはどれくらいのスピードで動かすのかを考えてbackground-positionプロパティーで大きな値を指定するだけで良い。

body {
  background-image: url('background.png');
  background-position: 0 0;
}

html:hover body {
  background-position: 720000px 720000px;
  transition-property: background-position;
  transition-timing-function: linear;
  transition-duration: 3600s;
}

デモでは800x800の画像を背景にしたので、4秒で1周するように720000pxを指定した。アニメーションの長さは1時間確保しておけば大丈夫だろう。リニアなアニメーションなら、このようにちょっと工夫すればできるけど、拡大・縮小を繰り返すとかはanimationプロパティーを使った本元CSSアニメーションじゃないと難しい。

パフォーマンスとしてはInternet Explorer 11とFirefox 29ではハードウェア・アクセラレーションが何もせずに効くので問題ない。Chrome 34ではCPUを食いつくすので、なんらかの方法でハードウェア・アクセラレーションを有効にする必要がある。