JavaScript

スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Reading Time」

とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を読む時なんかに、下へスクロールしていくとスクロールバーにあと何分で読めるか時間を表示してくれるjQueryプラグイン「jQuery Reading Time」です。スクロールに追従してくれるのでどの位置にいても時間を確認することができます。

[ads_center]

使い方

使い方はとても簡単です。以下のようにHTMLを記述します。

<div class="post">
    <p>sample text sample text sample text...(以下略)</p>
</div>

jQuery本体とダウンロードしたJSファイルをhead内に読み込み、プラグインをセットすればOKです。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.readingTime.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $('.post').readingTime();
});
</script>

こんな感じでスクロールバーにあと何分かを表示してくれます。便利ですね。

jQuery Reading Time

ダウンロードや詳細は以下からどうぞ。

Ion Zoomシンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」前のページ

三脚不要で1枚のRAWからHDRを作成するやり方(Lightroom・Photoshop CS6)次のページ1枚のRAWからHDR作成

関連記事

  1. JavaScript

    画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

    画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトが…

  2. multi.js

    JavaScript

    検索機能がついたセレクトボックスを実装できる「multi.js」

    multi.jsは検索機能がついた使いやすいユーザーフレンドリーなセレ…

  3. no-image
  4. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  5. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

  6. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP