Hello guys, Today I am introducing a simple example of how can we make an image flipbook with the help of Turn JS. Turn JS is nothing but a JavaScript library that helps us to create beautiful magazines or books like user view with the advantage of HTML5.
Here is the html part, first you need to add some cdns like jquery and turn js modernizr
<!doctype html>
<html lang=”en”>
<head>
<meta name=”viewport” content=”width = 1050, user-scalable = no” />
<script type=”text/javascript” src=”./jquery.min.1.7.js”></script>
<script type=”text/javascript” src=”./modernizr.2.5.3.min.js”></script>
</head>
<body style=”background-color:brown”>
<div class=”flipbook-viewport” style=”margin:35px;”>
<div class=”container” >
<div class=”flipbook” >
</div>
</div>
</div>
Next part is to append some images to that “flipbook class”
<script type=”text/javascript”>
$(document).ready(() => {
$(‘.flipbook’).append(`<div style=”background-color:grey;color:orange;padding:215px;” class=”hard”><h1>Welcome</h1></div>`)
$(‘.flipbook’).append(`<div style=”background-color:white;” class=”hard”></div>`)
for(let i=1; i<=10; i++) {
$(‘.flipbook’).append(`<div style=”background-image:url(images/${i}.jpg)”></div>`)
}
$(‘.flipbook’).append(`<div style=”background-color:white;” class=”hard”></div>`)
$(‘.flipbook’).append(`<div style=”background-color:grey;color:orange;padding:215px;” class=”hard”><h1>Good Bye</h1></div>`)
})
</script>
here, class “hard” means the image is not foldable just like book cover. You can give better design to this.
Okay let’s move to the next part. This part is to call the turn method..
<script>
function loadApp() {
$(‘.flipbook’).turn({
width:922,
height:600,
elevation: 50,
gradients: true,
autoCenter: true
});
}
</script>
Here, the “elevation” keyword sets the elevation of the page during the transition, “gradients” keyword shows gradients or shadows during the transition and the last one “autoCenter” is used to keep the flipbook centered.
Of course you can add more keywords to get various transition effect of your flipbook. You can get whole documentation here, “http://www.turnjs.com/”
Finally we will append some styles and turnJS css and js, that you will found attached below or from tranjs official website.
<script>
yepnope({
test : Modernizr.csstransforms,
yep: [‘./turn.js’],
nope: [‘./turn.html4.min.js’],
both: [‘./basic.css’],
complete: loadApp
});
</script>
Thanks for reading this interesting blog. It may help you in the future.
Web Developer at Openweb Solutions
