Jquery progress indicator on page scroll

JavaScript

スクロールしている進捗度をプログレスバーで教えてくれる「Jquery progress indicator on page scroll」

Jquery progress indicator on page scrollはスクロールしている進捗度をプログレスバーで教えてくれるjQueryプラグインです。スクロールしていくと、それに合わせてメーターが変化していきます。

Jquery progress indicator on page scroll

デモ

下へスクロールしていくとそれに合わせてメーターが右へ伸びていきます。逆に上にスクロールしていくとメーターが左へいきます。

スクロール中の位置情報がすぐに分かるので、長文記事などで自分が今どの辺にいるのかをプログレスバーで表示させたい時に役立ちますね。

使い方もとてもシンプルです。

$("#progress-bar").onscroll();

オプションを用いることで背景カラーや高さを設定したりすることができます。

Jquery progress indicator on page scroll

Bywordでフルスクリーンにするためのショートカットキー前のページ

インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」次のページintence

関連記事

  1. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  2. Ace Responsive Menu
  3. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

  4. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  5. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

  6. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP