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

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

sponsors

使用方法

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               // 下部のオフセット
});

サンプル

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu molestie sem. Vestibulum ac ultrices odio, in facilisis elit. Sed mi dui, pulvinar sit amet ullamcorper a, aliquam ac elit. Duis quis rhoncus lectus. In id risus est. Vivamus in massa in mi finibus pharetra. Curabitur congue magna non ipsum fringilla aliquet. Proin vitae tellus augue. Quisque in fermentum libero, ut facilisis libero. Nulla hendrerit odio ligula, auctor interdum nunc ornare in. Cras vitae dui convallis, pellentesque orci at, sodales felis. Integer faucibus pellentesque imperdiet. Morbi nunc nulla, dictum at dui imperdiet, imperdiet imperdiet tellus. Vestibulum ut mauris eget augue consectetur hendrerit. Integer laoreet eros at augue ultrices, vel vulputate ligula lacinia. Vestibulum lorem neque, vehicula et orci non, mattis egestas eros. Nulla malesuada odio risus, id pulvinar leo aliquam non. Donec in nulla at ante bibendum molestie quis vitae sem. Morbi hendrerit urna a mi egestas pulvinar. Morbi ornare metus augue, ac egestas odio varius nec. Aliquam vulputate elementum magna nec facilisis. Aliquam commodo lacinia tellus a iaculis. Aliquam magna nulla, scelerisque ac nulla et, egestas ullamcorper nunc. Etiam tempor purus eu sem lacinia iaculis. Nullam auctor rutrum turpis ut scelerisque. Morbi gravida pulvinar magna in pulvinar. Suspendisse ut nisl ullamcorper, lacinia tortor volutpat, vehicula libero. Maecenas quam enim, feugiat sit amet justo at, eleifend malesuada enim. Praesent vehicula luctus risus ut dapibus. Aliquam ut imperdiet elit. Phasellus porttitor cursus blandit. Curabitur vel sodales dolor. Ut congue turpis ac malesuada iaculis. Donec luctus urna sed lectus imperdiet auctor. Fusce vulputate dictum faucibus. Ut imperdiet non nulla eu malesuada. Sed id massa eget odio fermentum ornare ut a enim. Nulla a lorem erat. Nullam lacus tellus, iaculis et varius a, vulputate et nunc. Mauris vitae varius purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus at velit nec mauris scelerisque congue quis eu metus. Etiam eget massa ligula. Maecenas non urna a dolor porttitor tincidunt ornare id sapien. Nulla laoreet velit ut arcu ultricies, nec convallis nunc vehicula. In sagittis, erat non egestas iaculis, neque urna blandit diam, quis porttitor enim nisi facilisis mi. Maecenas eget nisl mi. Nunc venenatis hendrerit gravida. Etiam vitae lectus nisl. Suspendisse vitae congue urna. Etiam sit amet convallis sapien. Sed bibendum elit leo, vitae finibus mauris egestas dictum. Vivamus tempor consequat feugiat. Quisque dignissim vulputate elit a bibendum. Vestibulum sed felis non urna consectetur laoreet sed eu sapien.

Javascriptサンプルページ一覧
skuare.net

sponsors