UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
Post on:2015年7月2日
sponsors
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。
アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
上部のバーを引っ張ると、その量でナビゲーションのアイテムを選択できます。
CSS3 Animated, Responsive Navigation
デスクトップ時は通常の水平型、スマホ時はキャプチャの状態になり、アイコンからバーを表示しプルダウンという流れがかなりかっこいいです。
Elastic SVG Sidebar Material Design
SVGを使ったエラスティックタイプのサイドバーで、引っ張るというアクションと実際のアニメーションが一致しているのが気持ちいいですね。
アイコンからアイテムが増殖するタイプで、デモページでは他に4タイプあります。
滴のように落ちて、増殖するタイプ。
三角形のアイテムを使った美しいデザインですね。
シンプルなオフキャンバスながら、細かいアニメーションが非常に気持ちいいです。
パタパタとアイテムが一つずつ開くアニメーションはかわいいですね。
UI with UX Improvement with only CSS
Pure CSSで実装されたオフキャンバスのメニューで、アニメーションと斜めのカットが美しいです。
これもPure CSSのオフキャンバスで、斜めというか扇のように開くアニメーションです。
Offcanvas sidebar menu with a twist
斜めを更にもう一つ、こちらは全体を斜めに傾けて表示するタイプです。
コンテンツを奥にぐいーんと傾けて表示するタイプ。
Line Menu Icon that Expands into Actual Menu
アニメーションで表示させる実際のメニューを小型化したアイコンでメニューが表示されます。
六角形のアイコンから、六角形状にアイテムが広がるナビゲーション。
半透明のグラデーションが美しい水平型のナビゲーション。
CSS Navigation Border Techniques
最後はシンプルで実用的なテクニック。
リストで実装された各アイテムの天地のボーダーのいろいろな指定方法。
sponsors
