iOS7 の動く壁紙っぽいインタラクションをWebでやる - blog.jgs.me

久々のテック系の記事です、どうもどうも。
iOS7が発表されて、エンジニアデザイナ界隈ではああだこうだ言うのがトレンドですが、我々ハイパーインターネットクリエイターとしてはiOS7で新しくなるデザインに順応していくのが役目なのかなー、とぼやっと思っているのでちょっと手を動かしてみることにしました。
iOS7は何度か実機で触らせてもらえる機会があって、まあいろいろ思うところはありますが、このホーム画面でアイコンが角度によって動いて擬似的なレイヤーを表現しているのは素でスゲェとおもいました。よくよく調べてみると、iOS6でもミュージックのコントローラやアプリ自体は角度によって光の当たり具合が変わるギミックがあって、細かい仕事をしているAppleもすごいし、見つけたひともすごいなあと。
それで、このスゲェ部分をWebでもインタラクションとして取り入れられたらデザインの幅も広がるんじゃないかなー、というモチベーションでちょっと作ってみました。
http://e-jigsaw.github.io/gyrodesign/
( iPhoneの各ブラウザで閲覧してください 、Mobile SafariとChrome for iOSで確認済です)
ちょっとわかりにくいですが、動画も用意しておきました。なんとなく浮き上がって見えないでしょうか!!
Gyro Design from Takaya Kobayashi on Vimeo .
手元で確認できるiOS7の実機がないので、記憶を探りながら実装してみただけなのでもしかしたら本家様とはちょっと挙動が違うかもしれないです。が、ちょちょっとコードを書くだけでなんとなくそれっぽいインタラクションが実装できることがわかりました。
ソースコードは
https://github.com/e-jigsaw/gyrodesign
を参照してください。例によってJade+Coffeescript+Stylus on Gruntjsという構成です。それぞれの文字要素をずらしたり、角度による変更値をいじってみたりしたんですが、イマイチ要素間での重なり感が再現できなかったのでいずれリベンジしたいところです。
あと今回はめんどくさかったので、ファンシーめな色ベタ塗りしかしてないのでiOS7っぽいグラデをCSSで再現したりも今後の課題であります。
実用的なところだと、各種ガワネイティブで実装されている擬似ネイティブUIの対応とか大変そうだなあ、とおもう次第です。
June 25th, 2013 11:30am iOS iOS7 Design iPhone Web Interaction Gyro
original: http://blog.jgs.me/post/53804401907
#0625

関連ページとランダムに選ばれたページ

筆者について

jigsaw(ジグソウ、1991年6月12日-)は日本のプログラマ、会社代表。本名は小林貴也(こばやし たかや)。主にウェブ、フロントエンド領域で活動している。カミング・スーン合同会社の代表社員。
さらに詳しく

寄附について

面白かったらBTCETHでの寄附をお待ちしております。
寄附のきろく