jQuery – 美しい！絵本をめくるような効果が出せるスクリプトBookBlockの使い方。
公式デモ：http://tympanus.net/Development/BookBlock/index.html
パラパラとめくるというよりも厚めの本をめくるような効果が出せるBookBlock。
PC・スマホ・タブレットでも操作可能なBookBlockを試してみます。
早速必要なファイルをhttp://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/からダウンロード！
ダウンロードしたファイルから今回使用したものは以下のものです。
-css-
- default.css（無くても可）
- bookblock.css
- demo1.css（まずはデモ1のテストをしたいので）
-js-
- jquery.bookblock.js
- jquerypp.custom.js
- modernizr.custom.js
-fonts-
＊fontsフォルダそのままで可。
- arrowsフォルダ
- codropsiconsフォルダ
次に記述をしていきます。
- htmlの記述
- css/jsへのリンクを記述。
- scriptも記述
htmlの記述
bb-itemの中に今回は画像を入れていますが、テキストでも大丈夫でした。
<div class="bb-custom-wrapper"> <div id="bb-bookblock" class="bb-bookblock"> <div class="bb-item"> <img src="images/m1.jpg" class="img-responsive" alt="image01" /> </div> <div class="bb-item"> <img src="images/m2.jpg" class="img-responsive" alt="image02" /> </div> <div class="bb-item"> <img src="images/m3.jpg" class="img-responsive" alt="image03" /> </div> <div class="bb-item"> <img src="images/m4.jpg" class="img-responsive" alt="image04" /> </div> <div class="bb-item"> <img src="images/m5.jpg" class="img-responsive" alt="image05" /> </div> </div> <nav> <a id="bb-nav-first" href="#" class="bb-custom-icon bb-custom-icon-first">First page</a> <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a> <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a> <a id="bb-nav-last" href="#" class="bb-custom-icon bb-custom-icon-last">Last page</a> </nav> </div>
head内にcssリンク記述。
<link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/bookblock.css" /> <link rel="stylesheet" type="text/css" href="css/demo1.css" />
/body直前にjsリンク記述。＊書き順が違うと動かないかもなのでこの順で。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/modernizr.custom.js"></script> <script src="js/jquerypp.custom.js"></script> <script src="js/jquery.bookblock.js"></script>
上記jsリンクに続き以下のscriptを/body直前に記述
<script>
var Page = (function () {
var config = {
$bookBlock: $('#bb-bookblock'),
$navNext: $('#bb-nav-next'),
$navPrev: $('#bb-nav-prev'),
$navFirst: $('#bb-nav-first'),
$navLast: $('#bb-nav-last')
},
init = function () {
config.$bookBlock.bookblock({
speed: 1000, //めくるスピード
shadowSides: 0.8,
shadowFlip: 0.7,
direction : 'ltr', //左開きltr,右開きrtl
orientation : 'vertical' //左右にめくる,上下にめくる場合horizontal
});
initEvents();
},
initEvents = function () {
var $slides = config.$bookBlock.children();
// add navigation events
config.$navNext.on('click touchstart', function () {
config.$bookBlock.bookblock('next');
return false;
});
config.$navPrev.on('click touchstart', function () {
config.$bookBlock.bookblock('prev');
return false;
});
config.$navFirst.on('click touchstart', function () {
config.$bookBlock.bookblock('first');
return false;
});
config.$navLast.on('click touchstart', function () {
config.$bookBlock.bookblock('last');
return false;
});
// add swipe events
$slides.on({
'swipeleft': function (event) {
config.$bookBlock.bookblock('next');
return false;
},
'swiperight': function (event) {
config.$bookBlock.bookblock('prev');
return false;
}
});
// add keyboard events
$(document).keydown(function (e) {
var keyCode = e.keyCode || e.which,
arrow = {
left: 37,
up: 38,
right: 39,
down: 40
};
switch (keyCode) {
case arrow.left:
config.$bookBlock.bookblock('prev');
break;
case arrow.right:
config.$bookBlock.bookblock('next');
break;
}
});
};
return {
init: init
};
})();
</script>
<script>
Page.init();
</script>基本はこれで完了！
画像サイズなどはCSSで変更可能。
レスポンシブに画像を拡大縮小には向いてないです。
スマホ向けには画像サイズを調整するかDEMO4のフルスクリーンを使えばなんとかなるかなと思いました。
jQuery – 美しい！本をパラパラめくるような効果が出せるスクリプトTurn.jsの使い方。
公式デモ：http://www.turnjs.com/#samples/magazine3/1
こちらはパラパラと冊子をめくる効果が出せるTurn.js。
PC・スマホ・タブレットでも操作可能です。
早速必要なファイルをhttp://www.turnjs.com/のDownloadボタンからダウンロード！
ダウンロードするといくつかのサンプルデータが利用できますが、今回はBasicを使ってみました。
ダウンロードしたBasicファイルから今回使用したものは以下のものです。
-css-
- basic.css
-js-
- jquery.min.1.7.js
- modernizr.2.5.3.min.js
- turn.html4.js
- turn.js
次に記述をしていきます。
- htmlの記述
- css/jsへのリンクを記述。（yepnope.jsを一部使用）
- scriptも記述
htmlの記述
<div class="flipbook-viewport"> <div class="container"> <div class="flipbook"> <div style="background-image:url(pages/1.jpg)"></div> <div style="background-image:url(pages/2.jpg)"></div> <div style="background-image:url(pages/3.jpg)"></div> <div style="background-image:url(pages/4.jpg)"></div> <div style="background-image:url(pages/5.jpg)"></div> <div style="background-image:url(pages/6.jpg)"></div> <div style="background-image:url(pages/7.jpg)"></div> <div style="background-image:url(pages/8.jpg)"></div> <div style="background-image:url(pages/9.jpg)"></div> <div style="background-image:url(pages/10.jpg)"></div> <div style="background-image:url(pages/11.jpg)"></div> <div style="background-image:url(pages/12.jpg)"></div> </div> </div> </div>
head内かbody終了直前にjsリンクを記述。
<script type="text/javascript" src="js/jquery.min.1.7.js"></script> <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
上記jsリンクに続き以下のscriptを/body直前に記述
このscriptでcssへリンクを付けています。
下のほうにあるyepnopeという記述のところです。
yepnope.jsは条件分岐によって描画速度を高速化させるjsです。
<script type="text/javascript">
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width:922,
// Height
height:600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ['js/turn.js'],
nope: ['js/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});
</script>基本的はこれで完了
デモはこちら・・・といってもサンプルデモそのままです。；
本の角にカーソルを持っていくとめくれます。
オプションも多数用意されています。
詳細はこちらへhttp://www.turnjs.com/docs/Main_Page