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

    JavaScriptの基本構文を忘れた!って時にサクっと見たい10項目

    最近はよくjQueryプラグインを使ったりすることが多くなってきたので…

  2. Touch-Tabs-jQuery

    JavaScript

    イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

    Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能…

  3. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

  4. Responsive Elements
  5. preload

    JavaScript

    プリロードやローディング画面を実装できるjQueryプラグイン「preload」

    preloadは、その名のとおり「プリロード」やローディング中の画面を…

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP