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

関連記事

  1. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

  2. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  3. GRT Responsive Menu
  4. JK Responsive Youtube Video and Image Gallery
  5. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

  6. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP