iPhone 4Sサイトの美しいスライドを実現しているCSS3のトリック

iPhone 4Sの販売が開始されてから2週間ほどが経過しようとしている。すでにiPhone 4Sを入手して、その高速さやiOS 5の新機能を堪能しているユーザも多いだろう。Webデベロッパ/Webデザイナとしてはここで、iPhoneそのものではなく、iPhoneの公式サイト「iPhone 4S」の上部に用意されているスライドに注目したい。ここは次のようにスライドが順繰り移動するアニメーションになっている。

Appleらしいデザインのアニメーションだが、このアニメーション処理には一切、プラグインなどは使われていない。画像とCSS3の機能を使ったWebページであり、動画が再生されているわけでも、JavaScript経由でゴリゴリレンダリングされているわけでもない。このテクニックはWebデザイナの間ではよく知られたもののひとつだが、John B. Hall氏の制作した「An explanation of the CSS animation on Apple's iPhone 4S webpage」に実にわかりやすい説明が載っているので紹介しておきたい。

iPhone公式サイトのスライドは実は1枚の画像を表示しているだけということのようだ(対応していないブラウザでは別のスタイルのスライドが表示されるようにフォールバックも実装されてはいる)。表示される領域が限られており、特定の部位が表示されるように画像をCSSトランジッションの機能を使ってアニメーションさせているだけというわけだ。「An explanation of the CSS animation on Apple's iPhone 4S webpage」を閲覧すると、大きな画像が回転し、実際にどのように表示領域が切り替わっているのかを視覚的に確認できて参考になる。