NavSync

JavaScript

ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

NavSyncはナビゲーションとコンテンツが連動してアニメーションするjQueryプラグインです。今いるコンテンツの位置に応じたナビメニューが分かるようになっているので、長いランディングページなんかにすごく良さそうですね。

NavSync

NavSync

メニューをクリックするとそのコンテンツの場所までスクロール移動されます。現在表示中のコンテンツに対するメニュー項目も一目で分かるので、すごく便利な機能ですね。

マークアップもこんな感じで実にシンプルです。

<nav>
    <a href="#anchor-1">sample1</a>
    <a href="#anchor-2">sample2</a>
    <a href="#anchor-3">sample3</a>
    <!-- 中略 -->
</nav>

で、プラグインを呼び出してあげます。

$(window).load(function() {
    $("nav").navSync();
});

オプションでアニメーションタイムなんかを設定することができるので、コンテンツとナビゲーションが連動したアニメーションを実装したいという方は、是非チェックしてみてはいかがでしょうか。

MacのAirmail 2で未読メールを先頭に表示させる方法前のページ

シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」次のページSimple jQuery Slider

関連記事

  1. flexible-bootstrap-carousel
  2. Choice.js
  3. Sidr

    JavaScript

    横からサイドメニューが現れるjQueryプラグイン「Sidr」

    面白いjQueryプラグインがあったのでメモがてらご紹介します。Sid…

  4. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  5. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  6. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP