title: Meaningful Transitions: Popup date: 2012-04-25 16:00 template: mt.jade transition: mt-popup
HTML/JS/CSSでMeaningful TransitionsのPart 2
様々なUIのトランジションパターンをアーカイブし、丁寧な説明を加えて紹介しているMeaningful Transitions。
UIの作り方のお勉強のためにインタラクティブなバージョンを作ってます。
第2回目のトランジションはPopup。
ユーザがアイテムを選択した際に効果的なトランジション :)
Meaningful Transitions in HTML/JS/CSS Part 2
I started building an interactive version of Meaningful Transitions purely for learning ui pattern, transition and animations.
The second transition is Popup
Check out Meaningful Transitions for detailed explanations.
ユーザがアイテムを選択した際に用いられる
アイテムがサムネイルからフルスクリーンにトランジションする
フルスクリーンから戻る際も同じトランジションを用いる
どのアイテムがフルスクリーン表示が可能なのかをユーザに伝えることが可能
アイテムはステージ上で大きくなっていくように見える
Cited from Meaningful Transitions