sounansa.net

サイドメニューをオシャレにスライドで表示するアニメーションのテクニック

スポンサーリンク

Pocket

タブレット対応などで良く使う、デフォルトでは非表示だけど、ボタンやアイコンをタップするとサイドメニューがにょきっと登場するやつです。

一般的なデザインフレームワークなんかでは、スマホと一緒で上から降りてくるアニメーションの一択であることが多いです。

いや、やっぱり横からサイドメニューを登場させたいのよ!って思うときありますよね。

でもアニメーションを仕込むのが超超超超超メンドイです。

オシャレなサイドメニューの登場アニメーションがないかなーと探していたら、ステキなものを見つけたので紹介。

TRANSITIONS FOR OFF-CANVAS NAVIGATIONS

CSSとjsを使ったテクニックです。

アニメーションなので、デモを見た方が早いです。

デモはこちら

たくさんあるアニメーションの中のいくつかを紹介します。

これが元の状態です。サイドメニューは表示されていません。緑のボタンのいずれかをクリックするとサイドメニューが登場します。
サイドバーのアニメーション

サイドメニューが回転して登場するアニメーション
3d-lotate

コンテンツがドアを引くように後ろに下がるアニメーション
open-door

コンテンツが少しだけ小さくなって後ろに下がるようなアニメーション
scale-down

コンテンツが小さくなってかつ斜めに奥行きをもって下がるようなアニメーション
scale-lotate-pusher

サイドメニューがコンテンツにかぶさるように横からスライドするアニメーション
slide-on-top

ソースはこちらでダウンロードできます。
http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/

スポンサーリンク

comments powered by Disqus