The easiest way to start right now - Download free version. It contains several examples: inserting 3D FlipBook into a page, using with a modal window, changing default settings, choosing an apropriate skin.
Introduction
3D FlipBook is a JavaScript (JS) flipbook plugin very similar model of real book. For animation imitation is used Newton mechanics. It allows 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 easily turns PDFs, images and HTMLs in a live flipbook.
Installation
Web server
3D FlipBook is a JavaScript (JS) application, it uses AJAX to fetch some data so it does not work locally. It needs to be run from a web server. You can use any web server that allows to access static data (.html, .js, .jpg, .png, .css).
Copying files
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>
Plugin has default options, so it can automatically load template files, but you need to put them in strict order. Create directories images, js, css, fonts and templates in the same directory. Then copy all contents
- from /3d-flip-book/images to images,
- from /3d-flip-book/fonts to fonts,
- from /3d-flip-book/templates to templates,
- from /3d-flip-book/css to css,
- from /3d-flip-book/js/libs to js.
Copy file from /3d-flip-book/js/dist/3dflipbook.min.js to js
Scripts
Append to the end of body the flipbook JavaScript (JS) 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>
Using
Create folder src next to index.html. There are two ways to create 3D FlipBook - choose your one.
Flipbook by HTML tag
Copy file /3d-flip-book/books/pdf/FoxitPdfSdk.pdf to src. Then insert tag to body before the scripts
<div class="flip-book-container solid-container" src="src/FoxitPdfSdk.pdf">
</div>
That is enough to create simple 3D FlipBook from PDF. Also you can have a look at similar example.
jQuery flipbook plugin
- Copy file /3d-flip-book/books/pdf/FoxitPdfSdk.pdf to src.
- Copy directory /3d-flip-book/books/image/theKingIsBlack to src.
- Copy directory /3d-flip-book/books/html/preview to src.
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 JavaScript (JS) scripts
<!-- To create 3D FlipBook from PDF -->
<script type="text/javascript">
$('.solid-container').FlipBook({pdf: 'src/FoxitPdfSdk.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>
Finish, 3D FlipBook is ready to flip. See live example.
Useful Links
For next learning it is recommended to visit links below.