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. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

  2. Shuffle Letters

    JavaScript

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Lett…

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグ…

  3. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

  4. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  5. universal-tilt.js

    JavaScript

    パララックスなど多彩なチルト効果を実装できる「universal-tilt.js」

    universal-tilt.jsはパララックスやスケールなど多彩なチ…

  6. Jqx-Media-Slider

最近の記事

  1. EOS RP
  2. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  3. スターバックス ハシエンダ アルサシア
  4. イングリッシュマフィン

アーカイブ

PAGE TOP