Flipbook sans aucun plugin

Question

J'essaie de faire ma propre technique de flipbook sans utiliser de plugin de toute façon j'ai essayé de le créer jusqu'à un certain point. Je ne suis pas capable de comprendre comment montrer les 50% d'arrière-plan vers le côté gauche de la page en cours et les 50% restants d'arrière-plan de la page à venir.

$(document).ready(function() { 
 
\t var degrees = 0; 
 
    $('.book-cover').click(function rotateMe(e) { 
 

 
    degrees += 180; 
 

 
    $('.book-cover').css({ 
 
     'transform': 'rotateY(-' + degrees + 'deg)', 
 
     '-ms-transform': 'rotateY(-' + degrees + 'deg)', 
 
     '-moz-transform': 'rotateY(-' + degrees + 'deg)', 
 
     '-webkit-transform': 'rotateY(-' + degrees + 'deg)', 
 
     '-o-transform': 'rotateY(-' + degrees + 'deg)', 
 
    }); 
 

 
    }) 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.book-bg { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 324px; 
 
    margin: 100px auto; 
 
    background: url("https://i.pinimg.com/236x/33/c9/7d/33c97d1ac95ebb016b79008dd4d1b51a--baby-flower-wedding-flower-girls.jpg") no-repeat; 
 
    background-size: cover; 
 
    transform-style: preserve-3d; 
 
    perspective: 1000px; 
 
    backface-visibility: hidden; 
 
} 
 

 
.book-cover { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: cover; 
 
    background: url("https://nurturestore.co.uk/wp-content/uploads/2016/11/tummy-time-ideas1.png") no-repeat; 
 
    transform-origin: 0, 100%; 
 
    transition: all 2.0s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="book-bg"> 
 
    <div class="book-cover"></div> 
 
</div>

Answer 1

J'ai résolu ce scénario sur le bouton événement de clic et il fonctionne très bien.

$(document).ready(function() { 
 
\t \t \t var i = 0; 
 
\t \t \t $('.flipitem').each(function() { 
 
\t \t \t \t if (i == 0) { 
 
\t \t \t \t \t $(this).addClass('visible'); 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
\t \t \t \t \t $(this).addClass('hidden'); 
 
\t \t \t \t } 
 
\t \t \t \t i++; 
 
\t \t \t }); 
 
\t \t \t $('.page').each(function() { 
 
\t \t \t \t $(this).addClass('hidden'); 
 
\t \t \t }); 
 
\t \t }); 
 
\t \t function flip() { 
 
\t \t \t var btn = $('#btn'); 
 
\t \t \t btn.addClass('hidden'); 
 
\t \t \t var active = $('.flipitem.visible'); 
 
\t \t \t var hidden = $('.flipitem.hidden'); 
 
\t \t \t var left = $('.page.left'); 
 
\t \t \t var right = $('.page.right'); 
 
\t \t \t var front = $('.front'); 
 
\t \t \t var back = $('.back'); 
 
\t \t \t front.removeClass('flip'); 
 
\t \t \t back.removeClass('flip'); 
 
\t \t \t var activeimage = active.html(); 
 
\t \t \t var hiddenimage = hidden.html(); 
 
\t \t \t left.html(activeimage); 
 
\t \t \t front.html(activeimage); 
 
\t \t \t right.html(hiddenimage); 
 
\t \t \t back.html(hiddenimage); 
 
\t \t \t $('.page').each(function() { 
 
\t \t \t \t $(this).removeClass('hidden'); 
 
\t \t \t }); 
 

 
\t \t \t setTimeout(function() { 
 
\t \t \t \t front.addClass('flip'); 
 
\t \t \t \t back.addClass('flip'); 
 
\t \t \t \t hidden.removeClass('hidden'); 
 
\t \t \t \t hidden.addClass('visible'); 
 
\t \t \t \t active.removeClass('visible'); 
 
\t \t \t \t active.addClass('hidden'); 
 
\t \t \t \t setTimeout(function() { 
 
\t \t \t \t \t $('.page').each(function() { 
 
\t \t \t \t \t \t $(this).addClass('hidden'); 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t btn.removeClass('hidden'); 
 
\t \t \t \t }, 500); 
 
\t \t \t }, 10); 
 
\t \t }

.flip3D { 
 
\t \t \t width: 200px; 
 
\t \t \t height: 500px; 
 
\t \t \t margin: 10px; 
 
\t \t \t float: left; 
 
\t \t } 
 

 
\t \t .front { 
 
\t \t \t position: absolute; 
 
\t \t \t transform: perspective(600px) rotateY(0deg); 
 
\t \t \t /* background:#FC0; width:240px; height:200px; border-radius: 7px; */ 
 
\t \t \t backface-visibility: hidden; 
 
\t \t \t transition: transform 0.5s linear 0s; 
 
\t \t } 
 

 
\t \t .back { 
 
\t \t \t position: absolute; 
 
\t \t \t transform: perspective(600px) rotateY(180deg); 
 
\t \t \t /* \t background: #80BFFF; width:240px; height:200px; border-radius: 7px; */ 
 
\t \t \t backface-visibility: hidden; 
 
\t \t \t transition: transform 0.5s linear 0s; 
 
\t \t } 
 

 
\t \t .flip.front { 
 
\t \t \t transform: perspective(600px) rotateY(-180deg); 
 
\t \t } 
 

 
\t \t .flip.back { 
 
\t \t \t transform: perspective(600px) rotateY(0deg); 
 
\t \t } 
 

 
\t \t .right { 
 
\t \t \t z-index: 1; 
 
\t \t \t position: absolute; 
 
\t \t } 
 

 
\t \t .left { 
 
\t \t \t z-index: 2; 
 
\t \t \t position: absolute; 
 
\t \t } 
 

 
\t \t .center { 
 
\t \t \t z-index: 3; 
 
\t \t \t position: absolute; 
 
\t \t } 
 

 
\t \t .left img { 
 
\t \t \t clip-path: inset(0 50% 0 0); 
 
\t \t } 
 

 
\t \t .right img { 
 
\t \t \t clip-path: inset(0 0 0 50%); 
 
\t \t } 
 

 
\t \t .front img { 
 
\t \t \t clip-path: inset(0 0 0 50%); 
 
\t \t } 
 

 
\t \t .back img { 
 
\t \t \t clip-path: inset(0 50% 0 0); 
 
\t \t } 
 

 
\t \t .hidden { 
 
\t \t \t display: none; 
 
\t \t } 
 

 
\t \t .visible { 
 
\t \t \t display: block; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <div class="flip3D"> 
 
\t \t <div class="page left"></div> 
 
\t \t <div class="page center"> 
 
\t \t \t <div class="front"></div> 
 
\t \t \t <div class="back"></div> 
 
\t \t </div> 
 
\t \t <div class="page right"></div> 
 
\t \t <div class="flipitem"> 
 
\t \t \t <img src="https://nurturestore.co.uk/wp-content/uploads/2016/11/tummy-time-ideas1.png"> 
 
\t \t </div> 
 
\t \t <div class="flipitem"> 
 
\t \t \t <img src="https://i.pinimg.com/236x/33/c9/7d/33c97d1ac95ebb016b79008dd4d1b51a--baby-flower-wedding-flower-girls.jpg"> 
 
\t \t </div> 
 
\t </div> 
 
\t <button onclick="flip()" id="btn">Next</button>