ペラペラと本をめくる動作－jQuery「Booklet」の使い方

2011年09月13日 - Yutaka Moromizato

Webサイトで「こんな表現したいなー」と思うことがあったら、
まずjQueryプラグインがないかどうか探してみることをオススメします。

今日は本をペラペラめくるような動作を表現したjQueryプラグイン「Booklet」を紹介したいと思います。

ダウンロード

jQueryプラグインのダウンロードはこちらから
→jQueryプラグイン「Booklet」

インストール／実装方法

  1. 上記リンクより作者サイトへ行き、Bookletをダウンロードします。
  2. Bookletを使うHTMLファイルのヘッダ要素に以下のコードを貼付けます。
    ダウンロード後解凍して出来たbookletフォルダをそのまま使いたいhtmlのあるフォルダに設置してOK。
    パスくらい調整できる人は、APIなどもコピって外部ファイルにしてOK。
    3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.2.0.min.js" type="text/javascript"></script>
  3. htmlにdivでボックスを作ります。
    その中に「b-loadクラス」のdivを設けます。このb-loadクラスがBookletの動作条件になっています。
    b-loadクラス以下のdiv要素は、bookletによって1ページ分の情報として扱われるようになります。
    4. <div id="mybook">
<div class="b-load">
<div><h3>Yay, Page 1!</h3></div>
<div><h3>Yay, Page 2!</h3></div>
<div><h3>Yay, Page 3!</h3></div>
<div><h3>Yay, Page 4!</h3></div>
</div>
</div>
  4. Bookletを初期化します。
    以下のコードをヘッダ要素内に記述します。
    5. $(function() {
	//単一のbookletを使う場合
	$('#mybook').booklet();

	//複数のIDで複数のbookletを使う場合
	$('#mybook1, #mybook2').booklet();

	//自分で指定したクラスで複数のbookletを使う場合
	$('.mycustombooks').booklet();
});
  5. IE6用の対策をおこなうことが出来ます。
    pngで透過させる対策です。
    DD_belatedPNG.jsはこちらから入手できます。
    DD_belatedPNG
    6. <!--[if lte IE 6]>
	<script src="DD_belatedPNG.js" type="text/javascript"></script>
	<script type="text/javascript">
		DD_belatedPNG.fix(".b-shadow-f, .b-shadow-b, .b-p0, .b-p3, .b-arrow-next div, .b-arrow-prev div");
        </script>
<!--[endif] -->
  6. オプションでめくるスピードや、本の高さ、横幅、他にもいろいろな指定ができます。
    7. //default options
  $("#mybook").booklet();

//custom options
  $("#mybook").booklet({
  width: 800,
  height: 300,
  speed: 500,
  keyboard: false
});

是非お試しください！

ちなみに、Googleの「20 Things I Learned About Browsers and the Web」も本をめくる表現をJavaScriptで実現しています。

内容、表現ともにとても良いので見てみる価値ありです。

他にもこんな記事があります。

ホームページ制作のYOUE - ブログTOPへ »
ホームページ制作のYOUE - ホームへ »

コメントをどうぞ



↑ ページTOPに戻る