ページの読了目安を表示してくれるjQueryプラグイン「ReadRemaining.js」

ブログなどではページを読み終える時間の目安を最上部に記載することがあります。
今回紹介するjQueryプラグインReadRemaining.jsはスクロールする度にそれを教えてくれるものです。
ちょっと目障りかもしれませんが・・・
ページの読了目安を表示してくれるjQueryプラグイン「ReadRemaining.js」サンプル

使用方法 ReadRemaining.jsからファイルをダウンロード。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="readremaining.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.class名').readRemaining({
timeFormat : ' 残り %m分 %s秒 ' //時間フォーマット
});
});
</script>

あとは対象の要素にclass名を付与すれば完成です。

なお、デザインとしてダウンロードしたファイルに2つのcssが含まれています。
rr_light.css、rr_dark.cssを参考にデザインしてみましょう。
また、オプションは下記のようなものがあります。
$('.class名').readRemaining({
showGaugeDelay : 1000, // 表示タイミング
showGaugeOnStart : false, // 最初に出すかどうか
timeFormat : '%mm %ss left', // 表示フォーマット
maxTimeToShow : 20*60, // 最大表示(秒
minTimeToShow : 10, // 最小さい表示(秒
topOffset : 0, // 上部のオフセット
bottomOffset : 0 // 下部のオフセット
});


ページの読了目安を表示してくれるjQueryプラグイン「ReadRemaining.js」サンプル

sponsors

「ページの読了目安を表示してくれるjQueryプラグイン「ReadRemaining.js」」をシェアする

記事作成:
記事URL:

TOP > > > ページの読了目安を表示してくれるjQueryプラグイン「ReadRemaining.js」