"TEST: Make a flip book with HTML5 turn.js"
Bootstrap 3.2.0 Snippet by mrmccormack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="???http://www.turnjs.com/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="http://www.turnjs.com/extras/modernizr.2.5.3.min.js"></script>
<div class="container">
<div class="row">
<h2>Make Twitter Bootstrap flip book with HTML5 ·<small>"turn.js" by: Emmanuel García</small></h2>
<p>
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5.
<br>
Works on most browsers and devices
Simple and clean API
Lightweight, 10K
</p><hr>
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Basic sample */
body{
overflow:hidden;
background-color:#fcfcfc;
margin:0;
padding:0;
}
.flipbook-viewport{
overflow:hidden;
width:100%;
height:100%;
}
.flipbook-viewport .container{
position:absolute;
top:50%;
left:50%;
margin:auto;
}
.flipbook-viewport .flipbook{
width:922px;
height:600px;
left:-461px;
top:-300px;
}
.flipbook-viewport .page{
width:461px;
height:600px;
background-color:white;
background-repeat:no-repeat;
background-size:100% 100%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: