アラサーだよ!#

scoyan_card5.png


弊ブログのお客様にはおなじみ?すこやんカードです。

これは一枚の画像ではなく、動く背景画像の上に、一部が透過している前景画像を載せています。
動くJavascriptというサイト様の記事を参考に、はじめJavascriptで背景を動かしていましたが、onloadというイベントハンドラを使っていて、これは同時に別のonloadを使ったプログラムがあると、どちらかが止まってしまうという難点がありました。
jQueryを使えば何とかなるという情報も得ましたが、jQueryはちょうど昨日勉強を始めたばかりで、当然その時は何の知識もありませんでした。
そこで、CSSで背景を動かすことにしました。
CSS3のanimationプロパティを使うやり方なら、わりと簡単そうに思えたので。
まずテストとして、ブログの背景画像を動かしてみました。
動きました。
次にすこやんカードに応用しました。これもあっさりとできました。
上のやつが一応の完成品です。

ただ問題として、
  1. CSS3に未対応の古いブラウザでは動かない。モダンブラウザでも、Chromeで動かない()。InternetExplorerではどういうわけかサイトの動作が重くなり、GIFアニメ画像(まとめアンテナ様のバナーなど)までがカクカクになる。
  2. スマホやケータイでは背景画像そのものが表示されない(これはJavascriptでも同じことですが)。

うーん残念。
というわけで、今回の牌テクノロジーは(も)大事なところには使えないようです。

でも、せっかくなのでソースコードを
(見やすくするために主要でないプロパティやベンダープレフィックスを省略しています)

スタイルシート

div.scoyan_card_css{
  display: table-cell;
  background: url(背景画像のURL) repeat;
  animation: bg_scoyan_card 400s linear infinite;
}
@keyframes bg_scoyan_card {
  0% {background-position:4000px 0;}
  25% {background-position:0 -4000px;}
  50% {background-position:-4000px 0;}
  75% {background-position:0 4000px;}
  100% {background-position:4000px 0;}
}

HTML

<div class="scoyan_card_css">
  <img src="前景画像のURL" border="0" width="auto" />
</div>

keyframesの中でアニメーションを具体的に定義し、セレクタ内のanimationプロパティでスピードなどを制禦しています。
セレクタをID指定のdiv#ではなくクラス指定のdiv.にすることで、同じページ内に何箇所でも同じアニメを表示できます。
上の例は野球のダイヤモンドを回るような単純な動きですが、工夫次第でもっと面白い変化が表現できると思います。
前景画像をGIFアニメにしても面白そうですね。

あ、この背景画像は阿知賀編のあの映像をキャプチャしたものがもとになっています。コードに4000pxとか書いてあってぎょっとされた方もいるかもしれませんが、小さい画像をCSSでタイル状に並べているだけです。
(よく見ると継ぎ目がくっきりはっきりしてましてよ!)

ぼちぼち頑張ります。
ではまた。


【4月10日追記】
Chromeでも動くようになりました。
たまたま@-webkit-keyframesの{}の後ろにカーソルを合わせたら、たぶんコメントアウトで使った全角スペースが残っているのが見つかり、うわキモいとこれを削除したら解決していました。
…くっだらねー。バグなんて大抵こんなもんじゃね(ニワカ談)