Apple製品はもちろんのこと、そのサイトもまた美しい(´ω`)b

レイアウトの美しさもさることながら、サイト内の随所に散りばめられたちょっとしたアニメーションがスパイスになってサイト全体のレベルを引き上げていますwww

たとえば、こういうところ・・・

アップル – iPhone 5 – iPhone 5を生み出した方法をご紹介します。

このアニメってMPEGでもYouTubeでもGIFアニメでもなく、ましてやFlashを使っているわけでもないし・・・
いったいどうやっているのか皆目分からず、ずっと気になっていたところ、ぷらすぶろぐさんがどのように動かしているのかを紹介されていました。

iPhone5サイトの動画にWEBデザイナーが命削ってるぞ | ぷらすぶろぐ
 この数秒の動画、実はWEBデザイナーの執念とも言える動画で、約1MのJPEGファイルからJavaScriptで計算しまくってリアルタイムで動画を作っています。

なぬ！執念ですとぉぉぉ！！！

ち〜と、具体的に説明しますと・・・

まず、動いている部分だけを細かく切り出し、並べて一枚のJPEG画像にして・・・

一見、何がなんだかわかりませんが、よくよく見るとアイコンがスライスされて並べられているのがわかると思います。
クリックで拡大されるのでご確認ください。

で、この画像を JavaScriptを使って、瞬間瞬間に必要な画像を抜き出し適所に配置していくことで、美しい動画を実現しています。

この技術により、動画サイズのダイエットとほとんどの端末での表示が可能となっています！！

これぞAppleクオリティ(≧ω≦)ｂ!!

元記事では、なぜこのような方法が採用されたかやこの技術の歴史など、より詳しく書かれているのでご覧みそらそ(≧∀≦*)ﾉ

iPhone5サイトの動画にWEBデザイナーが命削ってるぞ | ぷらすぶろぐ

Touch me!ディズニーキャラクター/ホームボタンにピッタリのステッカー(ミッキー)