Want to implement only one sided book flip animation in jquery

Question

Generally, in book flip animation, pages are flips from a center of the book. But we have one client requirement which is page should flip from left side not from the center just like the cover page. every time if we change a page it flips and hides to the left side. please suggest any library which satisfies.

I have given one sample for reference.

function clickFUnctionality() {
  if (document.getElementById("page-flip").className == "active") {
    document.getElementById("page-flip").classList.remove("active");

  } else {
    document.getElementById("page-flip").className = "active";

  }
}

body {
  padding: 0;
  margin: 0;
}

#all {
  width: 680px;
  margin-left: auto;
  margin-right: auto;
}

#page-flip {
  position: absolute;
  padding: 40px 40px 40px 0;
  width: 300px;
  height: 400px;
  overflow: hidden;
}

#r1 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
}

#p1 {
  width: 1285px;
  height: 1388px;
  overflow: hidden;
}

#p1>div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1030px, 500px) rotate(32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  width: 285px;
  height: 388px;
  background-image: url(http://cssdeck.com/uploads/media/items/8/87WOlJH.jpg);
}

#p1>div>div {
  width: 10px;
  height: 388px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0, 0, 0, 0)));
}

#p2>div {
  width: 285px;
  height: 388px;
  -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  position: absolute;
  z-index: 1;
  background-image: url(http://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg);
}

#r3 {
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  position: absolute;
  z-index: 2;
}

#s3 {
  -webkit-transform-origin: 70px 500px;
  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  position: absolute;
  z-index: 1;
}

#page-flip.active #s3 {
  -webkit-transform-origin: 325px 500px;
  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}

#sp3 {
  width: 25px;
  height: 1000px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0, 0, 0, 0)));
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  overflow: hidden;
}

#page-flip.active #sp3 {
  width: 11px
}

.s {
  width: 285px;
  height: 388px;
  position: absolute;
  overflow: hidden;
  z-index: 3;
}

#s2 {
  -webkit-transform-origin: 45px 500px;
  -webkit-transform: translate(240px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  position: absolute;
}

#sp2 {
  width: 15px;
  height: 1000px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0, 0, 0, 0)));
  overflow: hidden;
}

#s4 {
  opacity: 1;
  -webkit-transition-duration: 0.5s;
}

#page-flip.active #s4 {
  opacity: 0
}

#page-flip.active #s2 {
  -webkit-transform-origin: 300px 500px;
  -webkit-transform: translate(-15px, -500px) rotate(0deg);
}

#p3 {
  width: 1285px;
  height: 1388px;
  overflow: hidden;
}

#p3>div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1255px, 500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  width: 285px;
  height: 388px;
  background-image: url(http://cssdeck.com/uploads/media/items/6/6S8oF28.jpg);
  overflow: hidden;
}

#p3>div>div {
  width: 9px;
  height: 500px;
  float: right;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .20)));
}

#page-flip.active #r1 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
}

#page-flip.active #p1>div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1285px, 500px) rotate(0deg);
}

#page-flip.active #r3 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
}

#page-flip.active #p3>div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1000px, 500px) rotate(0deg);
}

a {
  display: block;
  position: absolute;
  margin: -20000px 0 0 0;
  padding: 1px;
  z-index: 3;
  -webkit-transition-property: margin;
  -webkit-transition-duration: 0.01s;
}

#coke {
  width: 253px;
  height: 158px;
}

a:hover {
  padding: 0;
  border: 1px dotted #92C7C1;
}

#page-flip.active #coke {
  -webkit-transition-delay: .8s;
  margin: 33px 0 0 14px;
}

#meninas {
  width: 253px;
  height: 167px;
}

#page-flip.active #meninas {
  -webkit-transition-delay: .8s;
  margin: 203px 0 0 14px;
}

user7207170 · Accepted Answer

I found this plugin: http://www.jquery.info/scripts/jFlip/demo.html

I think it might be close to what you're looking for. Hope it helps.

$("#g1").jFlip(300,300,{background:"green",cornersTop:true,scale:"fill"});

#g1 li img{
width:60px;
}

Want to implement only one sided book flip animation in jquery

Answers (1)

Related Questions