Vous voulez mettre en œuvre l'animation d'un seul côté du livre en jquery.

Question

En général, dans l'animation flip book, les pages sont tournées à partir d'un centre du livre. Mais nous avons une exigence du client qui est que la page doit se retourner du côté gauche et non du centre, comme la page de couverture. Chaque fois que nous changeons une page, elle se retourne et se cache du côté gauche. Veuillez suggérer une bibliothèque qui satisfait à cette exigence.

J'ai donné un échantillon à titre de référence.

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;
}

<div id="all">
  <div id="page-flip">
    <div id="r1">
      <div id="p1">
        <div>
          <div></div>
        </div>
      </div>
    </div>
    <div id="p2">
      <div></div>
    </div>
    <div id="r3">
      <div id="p3">
        <div>
          <div></div>
        </div>
      </div>
    </div>
    <div class="s">
      <div id="s3">
        <div id="sp3"></div>
      </div>
    </div>
    <div class="s" id="s4">
      <div id="s2">
        <div id="sp2"></div>
      </div>
    </div>
    <a id="coke" href="#" title="Pure CSS Coke Can"></a>
    <a id="meninas" href="#" title="CSS 3D Meninas"></a>
  </div>
</div>
text
<button onclick="clickFUnctionality()">Change state</button>

Answer 1

J'ai trouvé ce plugin : http://www.jquery.info/scripts/jFlip/demo.html

Je pense que ça pourrait être proche de ce que vous recherchez. J'espère que cela vous aidera.

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

#g1 li img{
width:60px;
}

<script src="http://www.jquery.info/scripts/jFlip/jquery-1.2.6.min.js"></script>
<script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.4.js"></script>
<ul id="g1">
  <li>
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" />
  </li>
  <li>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" />
  </li>
  <li>
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" />
  </li>
  <li>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" />
  </li>
  <li>
    <img src="https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg" />
  </li>
  <li>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" />
  </li> 
</ul>