Flipbook Using turn.js

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>

Output

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories