The easiest way to start right now - Download demo version. It contains several examples: inserting 3D FlipBook into a page, using with a modal window, changing default settings, choosing an apropriate skin.
3D FlipBook is very similar model of real book. For animation imitation is used Newton mechanics. It allow to receive very realistic page flips. Using physics model allow to the pages interact with other pages. So the animation looks natural and very attractive.
3D FlipBook uses AJAX to fetch some data so it does not work locally. It needs to be run from web server. You can use any web server that allows to access static data (.html, .js, .jpg, .png, .css).
Create index.html on the web server with next contents
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D FlipBook</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.solid-container {
height: 100vh;
}
</style>
</head>
<body>
</body>
</html>
Create directories images, js, css, fonts and templates in the same directory. Then copy all contents
Copy file from /proj/js/dist/3dflipbook.min.js to js
Append to the end of body the scripts
<script src="js/jquery.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/three.min.js"></script>
<script src="js/pdf.min.js"></script>
<script src="js/3dflipbook.min.js"></script>
Create folder src next to index.html. There are two ways to create 3D FlipBook - choose your one.
Copy file /proj/public/books/pdf/CondoLiving.pdf to src. Then insert tag to body before the scripts
<div class="flip-book-container solid-container" src="src/CondoLiving.pdf">
</div>
That is enough to create simple 3D FlipBook from PDF. Also you can have a look at similar example.
Insert tag to body before the scripts
<div class="solid-container">
</div>
To create 3D FlipBook add to the end of body one of the scripts
<!-- To create 3D FlipBook from PDF -->
<script type="text/javascript">
$('.solid-container').FlipBook({pdf: 'src/CondoLiving.pdf'});
</script>
<!-- To create 3D FlipBook from images -->
<script type="text/javascript">
$('.solid-container').FlipBook({
pageCallback: function(n) {
return {
type: 'image',
src: 'src/theKingIsBlack/'+(n+1)+'.jpg',
interactive: false
};
},
pages: 40
});
</script>
<!-- To create 3D FlipBook from HTMLs -->
<script type="text/javascript">
$('.solid-container').FlipBook({
pageCallback: function(n) {
return {
type: 'html',
src: 'src/preview/'+(n%3+1)+'.html',
interactive: true
};
},
pages: 10
});
</script>
For next learning it is recommended to visit links below.