Turn.js is a JavaScript library that allows us to create digital books the user can flip through their pages. Although the library is available as an open source project on GitHub there are some restrictions on using it. Make sure you check the license terms before you choose to use it.
The following code sample shows how simple it is to use this lighweight magnificent JavaScript library.
<!DOCTYPE html>
<html>
<head>
<title>turn.js demo</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="turn.js"></script>
<style type="text/css">
body{
background: #9988aa;
}
#book{
width:1152px;
height:400px;
}
#book .turn-page{
background-color:#ddd;
background-size:100% 100%;
}
</style>
</head>
<body>
<div id="book">
<div style="background-image:url('images/1.png');"></div>
<div style="background-image:url('images/2.png');"></div>
<div style="background-image:url('images/3.png');"></div>
<div style="background-image:url('images/4.png');"></div>
<div style="background-image:url('images/5.png');"></div>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#book').turn({
display: 'double',
acceleration: true,
elevation:50
});
});
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
</script>
</body>
</html>
The following video clip goes over the code of the above sample, shows its execution and explains each and every part of it.
You can find more resources for learning how to use this JavaScript library in my free community courses website at http://abelski.lifemichael.com.
