Flipbook without any plugin

Question

I am trying to make my own flipbook technique without using any plugin anyhow have tried to create it till some point. I am not able to figure out how to show the 50% of background towards the left side of the going page and the remaining 50% of background of the coming page.

$(document).ready(function() {
 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;
}

user_4209384 · Answer

I have solved this scenario on button click event and it is working fine.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .hidden {
   display: none;
  }

  .visible {
   display: block;
  }

Flipbook without any plugin

1 Answers