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. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  2. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

  3. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  4. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  5. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP