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

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

Apple - iPhone 4S - The most amazing iPhone yet. のスライド1枚目

Apple - iPhone 4S - The most amazing iPhone yet. のスライド2枚目

Apple - iPhone 4S - The most amazing iPhone yet. のスライド3枚目

Apple - iPhone 4S - The most amazing iPhone yet. のスライド4枚目

Apple - iPhone 4S - The most amazing iPhone yet. のスライド5枚目

Apple - iPhone 4S - The most amazing iPhone yet. のスライド6枚目

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

スライド1枚目の裏舞台

スライド2枚目の裏舞台

スライド3枚目の裏舞台

スライド4枚目の裏舞台

スライド5枚目の裏舞台

スライド6枚目の裏舞台

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



人気記事

一覧

イチオシ記事

新着記事