[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu

スムーズなアニメーションでコンテンツをスライドさせ、ナビゲーションをズーム・スライドのアニメーションで表示させるレスポンシブ用ナビゲーションのデモを紹介します。

デモのキャプチャ

A Responsive Off-Canvas Menu

デモは、デスクトップでもスマートフォンでもどちらでも楽しめます。
ブラウザで見る時は、幅740px以下にしてください。

デモのキャプチャ

デモページ:メニューが閉じてる状態

上部左のボタンをタップorクリックすると、左からナビゲーションがアニメーションで表示されます。
このアニメーションがかっこいい!

デモのキャプチャ

デモページ:メニューが開いてる状態

Off Canvas Menuは鋭意開発中のデモで、現状の問題点としてはいくつかのブラウザでちらつきが起きます。
スマフォで見ると、ちらつきました。

デモのキャプチャ

デモページ:スマフォで表示

現在は更なる改善を行っているとのことで、非常に楽しみですね。

top of page

©2017 coliss