BookBlock Revised

JavaScript

ページめくりのエフェクトを実装できるjQueryプラグイン「BookBlock Revised」

BookBlock RevisedというjQueryプラグインを使えば本やカレンダーのようなページめくりのエフェクトを実装することができます。ペラっとした柔らかい紙の質感ではなくて、パタパタとめくっていく感じです。横にめくるのはもちろん、縦にもめくれる(実際のデモではカレンダーとして実装)のが面白いですね。

[ads_center]

BookBlock Revisedの使い方

BookBlock Revised

BookBlock Revised

こんな感じで、本を読んでいるかのようにめくっていくことができます。

マークアップもシンプルですね。

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <!-- コンテンツ -->
    </div>
    <div class="bb-item">
        <!-- コンテンツ -->
    </div>
    <!-- 中略 -->
</div>

プラグインの呼び出し。

$(function() {
    $('#bb-bookblock').bookblock();
});

ページめくりを実装したい時に覚えておきたいプラグインです。

関連記事

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

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  2. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  3. JavaScript

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  4. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  5. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP