[CSS]スクリプト無し、レスポンシブ用のナビゲーションを表示するちょっと素敵な7種類のアニメーション
Post on:2014年1月29日
sponsors
スタイルシートで実装するレスポンシブ用のナビゲーションを表示する7種類のアニメーションのエフェクトを紹介します。
コンテンツをスライドして横からナビゲーションを表示するOff Canvasのスタイルは、去年あたりから数多くのサイトで見かけるようになりましたね。
HTML
ベースとなるHTMLは、下記のようにシンプルです。
<nav id="pushLeft">
<body>
<nav id="pushLeft">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</nav>
<div class="container">コンテンツ</div>
</body>
デモでは7種類のエフェクトが楽しめます。スライドするものをはじめ、ぺらっとめくるのや回転するのなどかっこいいのが揃っています。
各デモは、Chrome, Safariでご覧ください。
デモが楽しめない人用に、アニメーションgifを用意してみました。
Push in from left
左からコンテンツを押し出すように表示。
Push in from top
上からコンテンツを押し出すように表示。
Slide over from left
左からコンテンツに重ねるように表示
Rotate in top to left
上から回転しながら左に表示
Flip in left
左からページをめくるように表示
Reveal from left
左から下に隠されていたのを表示
Zoom out reveal
ズームアウトで下に隠されていたのを表示
ちなみに、表示幅が狭くなると下記のように表示されます。
幅780pxで表示
sponsors
