PrognRoll

JavaScript

スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」

PrognRollはスクロールによるプログレスバーを表示することができるjQueryプラグインです。軽量で使い方もシンプルなので手軽に実装できるのがいいですね。オプションもいくつか用意されています。

PrognRoll

デモ

デモではスクロールしていくと、画面上部にどのくらい読み進めたかを示すプログレスバーが表示されます。コンテンツがあとどのくらいの量なのかを瞬時に把握できるので、長文による縦長ページなどと相性がよさそうですね。

また、オプションにはcolor、position、customといった項目が用意されています。positionには「top」か「bottom」を指定することが可能です。カラーも自分の好きな値を設定できるようになっています。

ファイル容量が軽量なところもうれしいポイントの一つです。

というわけで、スクロールによるプログレスバーを実装できるjQueryプラグイン「PrognRoll」のご紹介でした。

PrognRoll

Scrollaスクロール時にアニメーションするjQueryプラグイン「Scrolla」前のページ

シンプルなアコーディオンを実装する「A simple jQuery Accordion with unlimited nesting」次のページA simple jQuery Accordion with unlimited nesting

関連記事

  1. Radial SVG Slider

    JavaScript

    放射状に切り替わるスライダーを実装できる「Radial SVG Slider」

    Radial SVG Sliderは、放射状に広がりながら切り替わるス…

  2. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  3. jquery.square.js

    JavaScript

    スクエアなグリッドレイアウトを実装できる「jquery.square.js」

    jquery.square.jsは、スクエアなグリッドレイアウトを実装…

  4. JavaScript

    レスポンシブ対応のカッコイイLightbox風jQueryプラグイン「Lightcase」

    Lightcaseはフレキシブルでレスポンシブに対応したLightbo…

  5. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP