今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. テキスト・画像・iframeなどに対応したLightbox「Featherlight」
  3. テーブルにページャーを「PaginateMyTable」
  4. イベントを表示するカレンダーを実装「kalendar」
  5. 複数のpdfファイルをWebサイトに「pdfSlider」 - jQueryプラグイン

Web上に本のアニメーションを実装「Devrama Book」

スポンサーリンク

Web上に本のアニメーションを実装するプラグイン「Devrama Book」を紹介します。

jQueryプラグイン「Devrama Book」

このプラグインを使えば、クリック操作でページをめくることができる本をWeb上に作成することができます。

ページのめくり感も絶妙で、おもしろいプラグインですね。画像を挿入して絵日記のような使い方もおもしろいかもしれませんね!?

スポンサーリンク

デモのアニメーションブックをご覧ください。

「Devrama Book」のデモ

ソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Devrama Bookのデモでーす。">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.devrama.book.js"></script>  
<link rel="stylesheet" type="text/css" href="devrama-book.css"/>
<style>
#demo {
  margin: 50px 500px;
  text-align: center;
}
#demo h2 {
  padding 100px;
  color: #fff;
}
</style>
</head>
<body>

<h1>Devrama Book のデモでーす。</h1>

<div id="demo" class="devrama-book">
<ul class="front">
  <li class="front">
    <h2>本のタイトル</h2>
  </li>
  <li class="back">
    <h2>背表紙</h2>
  </li>
</ul>
<ul class="page">
  <li></li>
  <li>むかしむかしあるところに</li>
  <li>おじいさんと</li>
  <li>おばあさんがいました。</li>
  <li>おばあさんは川へ</li>
  <li>おじいさんは…</li>
</ul>
</div>

<script>
$(function(){
  $('.devrama-book').DrBook({
    width: 400,
    height: 500
  });
});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)