jQuery Page Flip

In this article, we will understand the jquery page flip plugin in detail with the help of various examples. A jQuery Flip Page plugin is used to creates the illusion of turning the pages of a book, magazine etc.

Example 1:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Page Flip </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
html { height: 100%; overflow: hidden; }
body { background: black; 
margin: 0;
 width: 100%; 
height: 100%;
 color: black;  }
.scene {
  width: 480px;
  height: 640px;
  margin: 16px auto;
  -webkit-perspective: 2000px;
  perspective: 2000px;
}
.book {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.page {
  cursor: pointer;
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;
  -webkit-transition: 1.5s -webkit-transform;
  transition: 1.5s transform;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  
  -webkit-transform-origin: left center;  
  -ms-transform-origin: left center;  
  transform-origin: left center;
}
.front {
  position: absolute;  
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
  -webkit-backface-visibility: hidden;  
  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#ccc));
  background: -webkit-linear-gradient(top left, #fff, #ccc);
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.back {
  position: absolute;  
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
  -webkit-backface-visibility: hidden;  
  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#ccc));
  background: -webkit-linear-gradient(top left, #fff, #ccc);
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.page.active {
  z-index: 1;
}
.page.flipped {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.page.flipped:last-of-type {
  z-index: 1;
}
p {
  margin: 0;
}
</style>
<body>
  <div class="scene">
<h1> Jquery Page Flip </h1>
  <article class="book">
  <section class="page active">
    <div class="front">
      <p> <img src="https://placeimg.com/480/640/any?1"> </p>
    </div>
    <div class="back">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
  <section class="page">
    <div class="front">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>
    <div class="back">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
    <section class="page">
    <div class="front">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>
    <div class="back">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
    <section class="page">
    <div class="front">
           <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>
    <div class="back">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
    <section class="page">
    <div class="front">
      <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>
    <div class="back">
            <p> <img src="https://placeimg.com/480/640/any?2"> </p>
    </div>    
  </section>
</article>
</div>
<script>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CESDK2J7&placement=getbutterflycom" id="_carbonads_js"></script>
var currentPage = 0;
$('.book')
.on('click', '.active', nextPage)
.on('click', '.flipped', prevPage);
$('.book').on("swipeleft", nextPage);
$('.book').on("swiperight", prevPage);
function prevPage() {
  $('.flipped')
    .last()
    .removeClass('flipped')
    .addClass('active')
    .siblings('.page')
    .removeClass('active');
}
function nextPage() {
  $('.active')
    .removeClass('active')
    .addClass('flipped')
    .next('.page')
    .addClass('active')
    .siblings();
}
</script>
</body>
</html>

Explanation:

In the above example, we created a jquery page flip effect.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery Page Flip </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>      
<style>
h2 {
  color: #000;
  padding: 10px;
}
@import url('https://fonts.googleapis.com/css?family=Stalemate');
*, *:before, *:after {
  box-sizing: border-box;
}
h2 {
  font-size: 34px;
  color: red;
  text-align: center;
}
img {
  max-width: 100%;
}
body {
    background:  linear-gradient(
      rgba(255, 255, 255, 0.9), 
      rgba(255, 255, 255, 0.9)), url(https://s-media-cache-ak0.pinimg.com/originals/30/b3/a9/30b3a9b27032a6b9c1d7a69d2400fb9e.jpg);
  font-family: 'Stalemate', cursive;
}
p {
  text-align: center;
  padding-top: 10px;
  text-transform: uppercase;
  font-weight: 600;
}
img {
  height: 100px;
  width: 100px;
  padding: 5px;
  margin: 5px;
  text-align: center;
}
.card-grid {
	min-width: 120px;
	min-height: 160px;
  float: left;
  margin-right: 35px;
  text-align: center;
}
.front {
  background: #d2d2d2;
  border: 5px solid #eee;
  margin:5px;
}
.back {
  background: #d2d2d2;
  border: 0px solid #eee;
  padding: 10px;
  margin: 5px;
  min-height: 150px;
}
</style>    
<body>
<div id=" grid-containter ">
  <h2> Example Flip Effect using Jquery</h2>
  <div class="card-grid">
    <div class="front">
      <p> Front card</p>
      <a class="flip"><img src="https://www.52digital.com/wp-content/uploads/2019/06/52-digital-data-tree-1024x589.jpg"></a>
    </div>
    <div class="back">
      <p>Back card</p>
      <a class="unflip"><p>Name: ABC<br>Age:22yrs<br>Address:XYZ</p></a>
    </div>
  </div>
  <div class="card-grid">
    <div class="front">
      <p> Front card</p>
      <a class="flip"><img src="https://www.52digital.com/wp-content/uploads/2019/08/52-digital-data-swarm.jpg"></a>
    </div>
    <div class="back">
      <p>Back card</p>
      <a class="unflip"><p>Name: ABC<br>Age:22yrs<br>Address:XYZ</p></a>
    </div>
  </div>
  <div>
    <div class="clearfix"></div>
    <div class="container">
      <hr>
</div>
<script>
$(".card-grid").flip({
  trigger: "manual"
});
$(".flip").click(function() {
  $(this).closest(".card-grid").flip(true);
});
$(".unflip").click(function() {
  $(this).closest(".card-grid").flip(false);
});
</script>
</body>
</html>

Explanation:

In the above example, we created a jquery page flip effect.

Output:

Following is the output of this example.

Example 3:

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of jQuery  Page Flip </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>      
<style>
@import url('https://fonts.googleapis.com/css?family=Stalemate');
*, *:before, *:after {
  box-sizing: border-box;
}
h1 {
  font-size: 44px;
  color: red;
  text-align: center;
}
img {
  max-width: 100%;
}
body {
/*   background:  linear-gradient(
      rgba(255, 250, 250, 0.75), 
      rgba(255, 250, 250, 0.75)), url(https://image.freepik.com/free-vector/forest-herbs-blue-background_8365-70.jpg); */
/*     background:     linear-gradient(
      rgba(255, 250, 250, 0.75), 
      rgba(255, 250, 250, 0.75)
    ), url(https://i.pinimg.com/736x/3c/c0/54/3cc0541a55ce0550f78246bed0a96380--vintage-floral-backgrounds-vintage-wallpapers.jpg); */
    background:  linear-gradient(
      rgba(255, 255, 255, 0.9), 
      rgba(255, 255, 255, 0.9)), url(https://s-media-cache-ak0.pinimg.com/originals/30/b3/a9/30b3a9b27032a6b9c1d7a69d2400fb9e.jpg);
  font-family: 'Stalemate', cursive;
}
.container {
  overflow: hidden;
}
.book-wrapper {
  position: relative;
  margin: 2% auto;
  width: 670px;
}
.book-wrapper img {
      filter: drop-shadow(15px 5px 5px #494338);
}
.pages-container {
    position: absolute;
    top: 4%;
    left: 3%;
    right: 0;
    bottom: 0;
    width: 91.5%;
    height: 91%;
}
.pages [class^="page-num-"] {
	background-image: url("https://img00.deviantart.net/cbb9/i/2005/258/c/4/paper_texture_v5_by_bashcorpo.jpg");
   background-size: auto 100%;
  position: relative;
}
.pages-content {
    text-align: center;
      position: absolute;
    width: 100%;
    height: 100%;
    display: table;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10%;
}
.content-inner {
      text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.book-wrapper {
   user-select: none;
}
.page-num-1 .pages-background {
    background: linear-gradient( rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url(https://openclipart.org/image/2400px/svg_to_png/242093/Vintage-Floral-Texture-Background.png);
    background-size: cover;
    opacity: 0.2;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
</style>
<body>
<div class="container">
<h1> Example : jquery page Flip </h1>
  <div class="book-wrapper">
    <div class="book-cover">
      <img src="https://github.com/slyka85/assets/blob/master/bookcover2.png?raw=true" alt="">
    </div>
    <div class="pages-container">
      <div class="pages">
        <div class="page-num-1">
          <div class="pages-content">
            <div class="pages-background"></div>
            <div class="content-inner">
              <h1>Chapter 1</h1>
              <div class="text"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.</p></div>
            </div>
          </div>
        </div>
        <div class="page-num-2">
          <div class="pages-content">
            <div class="content-inner">
              <h1>Chapter 2</h1>
              <div class="text">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, cumque autem! Magni eligendi qui officiis? p>
                  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam odio modi, hic ratione fugit quod </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati deserunt magnam, at perspiciatis aut. Voluptatem consequuntur neque quisquam?</p>
                </div>
            </div>
          </div>
        </div>
        <div class="page-num-3">
          <div class="pages-content">
            <div class="content-inner">
              <h1>Chapter 3</h1>
              <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptas molestiae tempore amet adipisci dicta incidunt nisi alias distinctio fugit blanditiis dignissimos nobis deserunt eum consequuntur ipsam, perspiciatis numquam repellendus.</p>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus in odio deserunt est hic minima inventore, mollitia, officia aspernatur eaque voluptatibus? Amet, molestias adipisci delectus ea eligendi sit numquam illo.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="page-num-4">
          <div class="pages-content">
            <div class="content-inner">
              <h1>The End</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
(function($) {
'use strict';
var has3d,  
  hasRot,
  vendor = '',  
  version = '4.1.0',
  PI = Math.PI,
  A90 = PI/2,
  isTouch = 'ontouchstart' in window,
  mouseEvents = (isTouch) ?
    {
      down: 'touchstart',
      move: 'touchmove',
      up: 'touchend',
      over: 'touchstart',
      out: 'touchend'
    }  :
    {
      down: 'mousedown',
      move: 'mousemove',
      up: 'mouseup',
      over: 'mouseover',
      out: 'mouseout'
    },
  corners = {
    backward: ['bl', 'tl'],
    forward: ['br', 'tr'],
    all: ['tl', 'bl', 'tr', 'br', 'l', 'r']
  },
  displays = ['single', 'double'],
  directions = ['ltr', 'rtl'],
  turnOptions = {
    acceleration: true,
    display: 'double',
    duration: 600,
    page: 1,
    gradients: true,
    turnCorners: 'bl,br',
    when: null
  },
  flipOptions = {
    cornerSize: 100
  },
  pagesInDOM = 6,
turnMethods = {
  // $('#selector').turn([options]);
  init: function(options) {    
    has3d = 'WebKitCSSMatrix' in window || 'MozPerspective' in document.body.style;
    hasRot = rotationAvailable();
    vendor = getPrefix();
    var i, that = this, pageNum = 0, data = this.data(), ch = this.children();
    options = $.extend({
      width: this.width(),
      height: this.height(),
      direction: this.attr('dir') || this.css('direction') || 'ltr'
    }, turnOptions, options);
    data.opts = options;
    data.pageObjs = {};
    data.pages = {};
    data.pageWrap = {};
    data.pageZoom = {};
    data.pagePlace = {};
    data.pageMv = [];
    data.zoom = 1;
    data.totalPages = options.pages || 0;
    data.eventHandlers = {
      touchStart: $.proxy(turnMethods._touchStart, this),
      touchMove: $.proxy(turnMethods._touchMove, this),
      touchEnd: $.proxy(turnMethods._touchEnd, this),
      start: $.proxy(turnMethods._eventStart, this)
    };
</script>
</body>
</html>

Explanation:

In the above example, we created a jquery page flip effect.

Output:

Following is the output of this example.