Expanding Bar Navigation Concept

JavaScript

コンテンツエリアがダイナミックに開かれる「Expanding Bar Navigation Concept」

Expanding Bar Navigation Conceptは、コンテンツエリアがアニメーションによりダイナミックに開かれるのが特徴です。横型(または縦型)アコーディオンのような感じで、バーをクリックすることで目的のコンテンツを開くことができます。

Expanding Bar Navigation Concept

デモ

デモページでは全部で3つのデモを確認することができます。ページの下部に1、2、3と書かれた数字があるので、ここから好きなデモに移動できます。

1と2のデモではバーが横に並んでおり、いずれかのバーをクリックすると、左から右へ滑らかなアニメーションとともにコンテンツがダイナミックに開かれます。デモ1は優雅で落ち着いた印象のアニメーションです。デモ2はコンテンツが開かれるスピードが速いのでとてもスタイリッシュに動作します。

また、デモ3はページ下部にハンバーガーアイコンのようなものが表示されており、ここをクリックすると縦に並んだメニューバーが表示されます。

いずれかのバーを選択すると、そこを基点にコンテンツが開かれる仕組みです。コンテンツが開かれると右上に下矢印のアイコンが表示され、ここをクリックするとコンテンツを閉じることができます。

画面全体が一気に切り替わるアニメーションは、注目せずにはいられないですね。バーを基点にダイナミックにコンテンツが開かれる、かっこいいページを作りたいという人は、ぜひ「Expanding Bar Navigation Concept」をチェックされてみてはいかがでしょうか。

Expanding Bar Navigation Concept

関連記事

  1. jCorner

    JavaScript

    フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

    jCornerというjQueryプラグインを使ってみました。フラットデ…

  2. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  3. no-image

    JavaScript

    親要素の下端まで要素を固定表示できる「Scroll With Page」

    Scroll With Pageはスクロールしても特定の要素を固定表示…

  4. BookBlock Revised
  5. Babylon Grid
  6. Scrolltab

    JavaScript

    スクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」

    ScrolltabというjQueryプラグインを使えばスクロール移動さ…

最近の記事

  1. OWL-WDDESK01
  2. ワンタッチ着脱フィルターキット
  3. Soundcore Ace A1
  4. cheero USB-C PD Charger 60W

アーカイブ

PAGE TOP