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

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

関連記事

  1. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachと$.eachの簡単な使い方のメモ

    jQueryのeachと$.eachの使い方のメモです。あんまり深い知…

  3. Flurry

    JavaScript

    Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」

    FlurryはWebページに雪を美しく降らせてくれるアニメーションを実…

  4. ViewBox

    JavaScript

    レスポンシブに対応したLightbox風のイメージギャラリー「ViewBox」

    ViewBoxはレスポンシブに対応したLightbox風のイメージギャ…

  5. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  6. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

コメント

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

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

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP