【Scrolline.js】スクロールに対応したプログレスバーを実装する方法
Web制作者
「Webページでスクロールに対応したプログレスバーを表示したい。簡単に実装できる方法が知りたい。」
こういった疑問にお答えします。
本記事の内容
- Scrolline.jsによるプログレスバー実装方法
- Scrolline.jsのオプション
- サンプルいろいろ
こんにちは、mine（@mineblog7）です。
ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。
「Webスクロールした時に、スクロール量に対応したプログレスバー実装したい」という場合があります。
プログレスバーのイメージ
こんな感じで、スクロール量に対応したプログレスバーを実装します。
フリー配布されているjQueryプラグインは色々ありますが、今回はScrolline.jsというjQueryプラグインを導入してプログレスバーを実装する方法を紹介します。
Scrolline.jsによるプログレスバー実装方法
Scrolline.jsによるプログレスバーの実装方法を詳しく説明します。
» GitHub – anthonyly/Scrolline.js
実装手順
- jQuery読み込み
- 必要なファイルをダウンロード・読み込み
- 動作用のJavaScriptを記述
jQuery読み込み
まず、headタグ内でjqueryを読み込みます。
jQueryの読み込み
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>必要なファイルをダウンロード・読み込み
まず、下記リンクにアクセスします。
» jquery.scrolline.js
右クリックでダウンロードを選択し、そのままjquery.scrolline.jsという名前でローカルに保存します。
保存したjquery.scrolline.jsをサイトをサーバの任意のディレクトリににアップロードします。アップロードしたjquery.scrolline.jsを<head>内で読み込ませます。
<script type='text/javascript' src='（任意のパス）/jquery.scrolline.js'></script>これで準備はOKです。
動作用のJavaScriptを記述
下記JavaScriptコードを記述します。
$(function() {
$.scrolline();
});基本的には、これだけで動作します（ただし、デフォルト設定）。
実装イメージ
スクロールを上下するとバーが増減します。
Scrolline.jsのオプション
Scrolline.jsにはオプションが用意されています。
オプション
| オプション | 単位 | デフォルト | 詳細 |
| backColor | 文字列 | ‘#ecf0f1’ | プログレスバーの背景色 |
| direction | 文字列 | ‘horizontal’ | プログレスバーを横にするか縦にするかを指定できます。 （vertical:縦／horizontal:横） |
| frontColor | 文字列 | ‘#2ecc71’ | プログレスバーの色 |
| opacity | 数値 | 1 | 透明度の設定。 0～1の間の数値を指定します。 |
| position | 文字列 |
横方向の場合:’top’ 縦方向の場合:’left’ |
プログレスバーの位置指定。 横方向の場合:’top’ or ‘bottom’ 縦方向の場合:’left’ or ‘right’ |
| reverse | boolean | false | プログレスバーの進む方向を指定。 （true:右から左へ進む／false:左から右へ進む） |
| weight | 数値 | 5 | プログレスバーの高さ（px）指定。 |
| zindex | 数値 | 10 | プログレスバーのz-indexを指定。 |
| scrollEnd | 関数 | – | ページスクロールが終わったら、関数を呼び出す。 |
サンプルいろいろ
オプションの設定を変更して、カスタマイズしたプログレスバーを実装してみます。
サンプル1
サンプル1では下記の設定を変更しています。
サンプル1の設定
- プログレスバーの進行方向を逆にする
- プログレスバーの位置
- プログレスバーの背景色
- プログレスバーの色
- バーの高さ（太さ）
実装イメージ
JavaScript
$.scrolline({
reverse : true,
position : 'bottom',
backColor : '#cccccc',
frontColor : '#009688',
weight : 15
});reverse : trueにすることで、通常左から右にプログレスバーが伸びるものを右から左に伸びるようにしています。
サンプル2
サンプル1では下記の設定を変更しています。
サンプル1の設定
- プログレスバーを縦に変更
- プログレスバーの位置を右に変更
- プログレスバーの背景色
- プログレスバーの色
- プログレスバーの透明度を変更
- バーの高さ（太さ）
実装イメージ
JavaScript
$.scrolline({
direction : 'vertical',
position : 'right',
backColor : '#bbbbbb',
frontColor : '#ffc107',
opacity: 0.6,
weight : 25
});また、
opacity: 0.6を設定して、プログレスバーを透過させています。
サンプル3
サンプル3はオプションで紹介したscrollEndを設定します。
JavaScript
$.scrolline({
weight : 10,
scrollEnd : function() {
alert('スクロールを終了しました。');
}
});scrollEndはページをスクロールし終わった時に、設定した関数を実行させることができます。サンプル3では、スクロール完了した時に「スクロールを終了しました。」というアラートメッセージを表示するような設定をしています。
まとめ
Scrolline.jsによるプログレスバーの実装方法について再度まとめます。
ポイント
- jQueryを読み込む（前提）
- JavaScriptコードを記述
- 必要があればオプションを指定
プログレスバーの配色や、位置、進行方向など、オプションが比較的多いことが特徴です。サイトデザインなどに合わせて導入してみてください。
プログレスバー実装方法まとめ
Webページでプログレスバーを実装する8つの方法まとめ
mineblogでプログレスバーの実装方法をいくつか紹介してきました。各プログレスバーの実装方法について、その特徴や用意されているオプションを含めてまとめました。
おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話
おすすめ記事 「知らないから落ちる面接の４点減点法」で面接に挑んだ結果