Introduction – turn.js
Turn.js is a JavaScript package that uses HTML5 to give your content the appearance of a genuine book or magazine. New HTML5-based user interfaces make the web more appealing, and turn.js is the ideal option for an HTML5-based magazine, text, or catalog.
Features
- Suitable with iPhone and iPad
- Simple, attractive, and potent API
- Enables dynamic page loading using Ajax requests
- Just HTML5 and CSS3 content
- Two transitional outcomes
- Works with turn.html4.js in older browsers like IE 8 On the browser platform, effects are now comparatively smoother
- Effects are now comparatively smoother
- Regardless of the number of pages, the new DOM construction ensures the same speed.
Integrates
- The HTML4 version of turn.js is turn.html4.js
- turn.js’s new zoom functionality is zoom.js
- Manages the navigation history. scissors.js splits a page in two for turn.js.
- Using pushState and URI hashes, hash.js
API – turn.js
- acceleration – The hardware acceleration mode is configured with this, and true is the default
- display – This controls how many pages are displayed. This has two options: single or double; double is the default.
- duration – Sets the effect’s duration in microseconds; the default value is 600.
- gradients – Specifies the gradient mode; defaults to true
- height – Sets the page height; default: $(“selector”). height()
- inclination – Sets the folded page’s inclination when turned; default: 0
- page – Choose the first page, usually 1
- pages – Sets the page count; the default value is $(‘selector’). children().length
- when – The events are defined
- width – The width is defined via $(“selector”).width ()
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.js"></script>
</head>
<body>
<div id="flipbook-codehubs">
<div><img src="cover.png" alt="cover" title="cover page" /></div>
<div><img src="page1.png" alt="Page-1" title="page-1" /></div>
<div><img src="page2.png" alt="Page-2" title="page-2" /></div>
<div><img src="page3.png" alt="Page-3" title="page-3" /></div>
<div><img src="page4.png" alt="Page-4" title="page-4" /></div>
<div><img src="page5.png" alt="Page-5" title="page-5" /></div>
<div><img src="page6.png" alt="Page-6" title="page-6" /></div>
<div><img src="page7.png" alt="Page-7" title="page-7" /></div>
<div><img src="page8.png" alt="Page-8" title="page-8" /></div>
<div><img src="back.png" alt="back" title="back" /></div>
</div>
<script>
$(window).ready(function() {
$('#flipbook-codehubs').turn({
display: 'double',
acceleration: true,
});
});
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#flipbook-codehubs').turn('previous');
else if (e.keyCode==39)
$('#flipbook-codehubs').turn('next');
});
</script>
</body>
</html>
<style type="text/css">
#flipbook-codehubs{
width:600px;
height:350px;
}
</style>
