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

<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, height: 300, autoCenter: true }); </script> <hr> <div class="flipbook-viewport"> <div class="container"> <div class="flipbook"> <div style="background-image:url(<div class="flipbook-viewport"> <div class="container"> <div class="flipbook"> <div style="background-image:url(http://www.turnjs.com/pics/book1.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book2.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book3.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book4.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book5.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book6.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book7.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book8.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book9.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book10.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book11.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book12.jpg)"></div> </div> </div> </div> ></div> <div style="background-image:url(http://www.turnjs.com/pics/book2.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book3.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book4.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book5.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book6.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book7.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book8.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book9.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book10.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book11.jpg)"></div> <div style="background-image:url(http://www.turnjs.com/pics/book12.jpg)"></div> </div> </div> </div> </div> </div> <img src="http://i.imgur.com/W7M46bi.png" alt=""> <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: ['http://www.turnjs.com/lib/turn.min.js'], nope: ['http://www.turnjs.com/lib/turn.html4.min.js'], both: ['http://www.turnjs.com/css/basic.css'], complete: loadApp }); </script>
/* 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%; } .flipbook .page{ -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2); -moz-box-shadow:0 0 20px rgba(0,0,0,0.2); -ms-box-shadow:0 0 20px rgba(0,0,0,0.2); -o-box-shadow:0 0 20px rgba(0,0,0,0.2); box-shadow:0 0 20px rgba(0,0,0,0.2); } .flipbook-viewport .page img{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin:0; } .flipbook-viewport .shadow{ -webkit-transition: -webkit-box-shadow 0.5s; -moz-transition: -moz-box-shadow 0.5s; -o-transition: -webkit-box-shadow 0.5s; -ms-transition: -ms-box-shadow 0.5s; -webkit-box-shadow:0 0 20px #ccc; -moz-box-shadow:0 0 20px #ccc; -o-box-shadow:0 0 20px #ccc; -ms-box-shadow:0 0 20px #ccc; box-shadow:0 0 20px #ccc; }

Related: See More


Questions / Comments: