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」を閲覧すると、大きな画像が回転し、実際にどのように表示領域が切り替わっているのかを視覚的に確認できて参考になる。



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

求人情報