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.

Next TopicHow to create an online radio using jQuery and jPlayer

← prev next →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on [email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected]
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}