以下、完全に自己満足なアレです。
先週の金曜深夜にアニメ版アイドルマスター公式サイトが更新され、アニメのキービジュアルやアイコン、「応援バナー」と言った画像が公開されました。
で、昨日までは暫定的にりっちゃんプロデューサーのバナーを貼ってたんですが、先程「全員版」をでっち上げて差し替えました。
動きの滑らかさはマシンの負荷に依存します。マウスカーソルが乗ると少し大きくなります。
IEでも表示出来るはずですが、確認してません。（を
公式のバナーを見た瞬間、「全員版」が無いので選べねーよ！と困惑しました。
でもって、次に180×180の方を見て「キービジュアルを丸いマスクで切り抜いてるって事は、このデザイナーがイメージしてたのはこーゆー事だよね？」と思った動きをCSS+jQueryで作ってみた次第。
イメージは固まっていながらも、最初は「コーディング面倒だな」と言う気持ちがあり、単純に13種類を5秒インターバルぐらいで切り替えようかとも思ったのですが、翌日には「アイドルマスター情報まとめ」さんが「アニメ応援バナーがランダムで切り替わるJavaScript」なんてエントリを出しちゃったので、後出しするならそんな捻ってないのじゃダメでしょ、と思い直して妥協案を破棄。そんなこんなで今頃ノコノコとうｐですよ。
表現（動き）としてはベタだけど、データの差し替えが容易で、使い回し易いんじゃないかと思います。
使ってるのはjQuery（最新1.5では未確認、1.2～1.4ならたぶん問題無い）とBackground-Position Animationsと言うjQueryプラグインです。画像はbackgroundでスクロールしてるのは公式サイトのキービジュアル画像そのまんま（無加工）、その上に被さる円形マスクとロゴは公式サイトのを加工しています。うん、もし叱られたら引っ込めよう。
これ、CSS3対応度の高いブラウザ（最新WebKitやFirefox4beta）ならjQueryプラグイン無しで、と言うかjQuery本体も不要でCSS3だけでやれると思うんだよね。まぁ、そんな事言っても仕方ないけど、
もう少し千早、やよい、亜美、貴音、律子の腰下が描かれていればキャラをもっと真ん中寄りに持って来れたのに、とも思いますが、元素材へのアクセスは中の人の特権、高望みはするまい。
それにしても、本当に良いキービジュアルですね。
ピンバック: アニマスの動くバナーをCSS3で。 | ふるごむのブログ