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();
});

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

関連記事

  1. jquery.datepicker

    JavaScript

    未来的なデータピッカーを実装できる「jquery.datepicker」

    jquery.datepickerはWeb用の未来的なデータピッカーを…

  2. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  3. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  4. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  5. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  6. mFancyTitle

    JavaScript

    ブラウザのタブにあるファビコンとタイトルをアニメーション化できる「mFancyTitle」

    mFancyTitleは、ブラウザのタブに表示されているファビコンとタ…

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP