[CSS]スクリプト無し、レスポンシブ用のナビゲーションを表示するちょっと素敵な7種類のアニメーション

スタイルシートで実装するレスポンシブ用のナビゲーションを表示する7種類のアニメーションのエフェクトを紹介します。

コンテンツをスライドして横からナビゲーションを表示するOff Canvasのスタイルは、去年あたりから数多くのサイトで見かけるようになりましたね。

サイトのキャプチャ

Pure CSS Responsive Nav

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で表示

top of page

©2017 coliss