Web技術系中心に割と何でも更新中

【Scrolline.js】スクロールに対応したプログレスバーを実装する方法

Programming Web

Web制作者

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();
});

基本的には、これだけで動作します(ただし、デフォルト設定)。

実装イメージ

Scrollinejs実装イメージ
画面上部に緑色のプログレスバーを表示できます。
スクロールを上下するとバーが増減します。

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の設定

  • プログレスバーの進行方向を逆にする
  • プログレスバーの位置
  • プログレスバーの背景色
  • プログレスバーの色
  • バーの高さ(太さ)

実装イメージ

Scrollinejsサンプル1

JavaScript

$.scrolline({
	reverse : true,
	position : 'bottom',
	backColor : '#cccccc',
	frontColor : '#009688',
	weight : 15
});
プログレスバーの配色、太さを変更して、位置を最下部に設定しました。
reverse : trueにすることで、通常左から右にプログレスバーが伸びるものを右から左に伸びるようにしています。

サンプル2

サンプル1では下記の設定を変更しています。

サンプル1の設定

  • プログレスバーを縦に変更
  • プログレスバーの位置を右に変更
  • プログレスバーの背景色
  • プログレスバーの色
  • プログレスバーの透明度を変更
  • バーの高さ(太さ)

実装イメージ

Scrollinejs実装イメージ2

JavaScript

$.scrolline({
	direction : 'vertical',
	position : 'right',
	backColor : '#bbbbbb',
	frontColor : '#ffc107',
	opacity: 0.6,
	weight : 25
});
デフォルトではページ上部(横方向)に表示されますが、サンプル2ではページ右(縦方向)に表示しています。
また、opacity: 0.6を設定して、プログレスバーを透過させています。

サンプル3

サンプル3はオプションで紹介したscrollEndを設定します。

JavaScript

$.scrolline({
    weight : 10,
    scrollEnd : function() {
		alert('スクロールを終了しました。');
	}
});
scrollEndはページをスクロールし終わった時に、設定した関数を実行させることができます。サンプル3では、スクロール完了した時に「スクロールを終了しました。」というアラートメッセージを表示するような設定をしています。

まとめ

Scrolline.jsによるプログレスバーの実装方法について再度まとめます。

ポイント

  • jQueryを読み込む(前提)
  • JavaScriptコードを記述
  • 必要があればオプションを指定

プログレスバーの配色や、位置、進行方向など、オプションが比較的多いことが特徴です。サイトデザインなどに合わせて導入してみてください。

プログレスバー実装方法まとめ

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果