プラグインなしのFlipbook

Question

私はプラグインを使わずに自分のフリップブックのテクニックを作ろうとしています。私は、進行中のページの左側に向かってバックグラウンドの50％を表示し、次のページのバックグラウンドの残りの50％を表示する方法を理解することはできません。

$(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

私は、ボタンのクリックイベントにこのシナリオを解決してきたし、それが正常に動作しています。

$(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>