【Ajax】本をめくるような効果が簡単に作れる『Moleskine Notebook with jQuery Booklet』

Flashを使わなくても簡単に本をめくるような効果が得られるAjax。
本・パンフレットをめくるような見せ方でサイトに表示させたいというご要望を頂きますが、やはりFlashを使ったりするとその制作費に結構な金額がかかってしまいます。
そこで思ったのが、Flashを使わずにそのような効果が得られないかということで、検索して探しました！
そうすると結構早く「Moleskine Notebook with jQuery Booklet」というjQueryを利用したツールを発見！
Flashでないので、Flash制作程の手間がかからない！っというか、設置は簡単！
下記の設置方法をご参考にして頂ければと思います。

【１．ダウンロード】
まずは下記ページより、「DOWNLOAD」ボタンをクリックして、必要ファイルファイルをダウンロードします。
http://tympanus.net/codrops/2010/12/14/moleskine-notebook/
【２．タグ内の設定】
下記のタグを「タグ内」設置します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="cufon/cufon-yui.js" type="text/javascript"&gt</script>
<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
<script src="cufon/Note_this_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('h1,p,.b-counter');
	Cufon.replace('.book_wrapper a', {hover:true});
	Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
	Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
	Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
</script>

 
【３．タグ内の設定】 下記のタグを「タグの直前」設置します。

<script type="text/javascript">
	$(function() {
		var $mybook 		= $('#mybook');
		var $bttn_next		= $('#next_page_button');
		var $bttn_prev		= $('#prev_page_button');
		var $loading		= $('#loading');
		var $mybook_images	= $mybook.find('img');
		var cnt_images		= $mybook_images.length;
		var loaded			= 0;
		//preload all the images in the book,
		//and then call the booklet plugin
			$mybook_images.each(function(){
			var $img 	= $(this);
			var source	= $img.attr('src');
			$('').load(function(){
				++loaded;
				if(loaded == cnt_images){
					$loading.hide();
					$bttn_next.show();
					$bttn_prev.show();
					$mybook.show().booklet({
						name:               null,                            // name of the booklet to display in the document title bar
						width:              800,                             // container width
						height:             500,                             // container height
						speed:              600,                             // speed of the transition between pages
						direction:          'LTR',                           // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
						startingPage:       0,                               // index of the first page to be displayed
						easing:             'easeInOutQuad',                 // easing method for complete transition
						easeIn:             'easeInQuad',                    // easing method for first half of transition
						easeOut:            'easeOutQuad',                   // easing method for second half of transition
						closed:             true,                           // start with the book "closed", will add empty pages to beginning and end of book
						closedFrontTitle:   null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
						closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
						closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
						closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
						covers:             false,                           // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)
						pagePadding:        10,                              // padding for each page wrapper
						pageNumbers:        true,                            // display page numbers on each page
						hovers:             false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
						overlays:           false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
						tabs:               false,                           // adds tabs along the top of the pages
						tabWidth:           60,                              // set the width of the tabs
						tabHeight:          20,                              // set the height of the tabs
						arrows:             false,                           // adds arrows overlayed over the book edges
						cursor:             'pointer',                       // cursor css setting for side bar areas
						hash:               false,                           // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
						keyboard:           true,                            // enables navigation with arrow keys (left: previous, right: next)
						next:               $bttn_next,          			// selector for element to use as click trigger for next page
						prev:               $bttn_prev,          			// selector for element to use as click trigger for previous page
						menu:               null,                            // selector for element to use as the menu area, required for 'pageSelector'
						pageSelector:       false,                           // enables navigation with a dropdown menu of pages, requires 'menu'
						chapterSelector:    false,                           // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
						shadows:            true,                            // display shadows on page animations
						shadowTopFwdWidth:  166,                             // shadow width for top forward anim
						shadowTopBackWidth: 166,                             // shadow width for top back anim
						shadowBtmWidth:     50,                              // shadow width for bottom shadow
						before:             function(){},                    // callback invoked before each page turn animation
						after:              function(){}                     // callback invoked after each page turn animation
					});
					Cufon.refresh();
				}
			}).attr('src',source);
		});
	});
</script>

【４．本の表示部分のソース】
本を設置させたい部分に下記のタグを設置します。

<div class="book_wrapper">
<a id="next_page_button">Loading pages...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div>
<img src="images/1.jpg" alt=""/>
<h1>Slider Gallery</h1>
<p>This tutorial is about creating a creative gallery...</p>
<a href="#" class="article">Article</a>
<a href="#" class="demo">Demo</a>
</div>
<div>
...
</div>
</div>
</div>
</div>

 
上記タグの6行目から12行目を、同じ要領で繰り返し書き込めば、ページ数が増えていきます。
今回はこちらの抽象画家小屋哲雄様のサイトに設置させて頂きました。

こちらの記事もよく読まれています

ショッピングサイトは対策必須！直帰率を下げるためのサイト表示速度を高速化する３つの方法

【WordPressを使う際によく入れるプラグイン】カッコイイ拡大画像を表示『wp-jquery-lightbox』

WordPressの投稿記事内の一括置き換えプラグイン「Search Regex」

WordPressカテゴリー一覧を表示するタグ