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. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  2. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  3. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

  4. Circular Slider
  5. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  6. jquery countDownTimer

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP