Book Flip 3D Animation Effect- Useful Tips From The Experts

3D Animation Effect

Introduction

This is a custom 3D animated effect for Menu/ catalog/Book/brochure can be kept on the restaurant websites and as a real menu card for displaying the varieties of food available at their place. In Web Design Service this menu card can also be used in other product based websites were the varieties can be displayed as a brochure. 

Animation effects

Initially,  we can only see the cover of the folded menu, on click of the ‘view Inside’ option the menu unfolds to three-panel menu card. Simple CSS3/jQuery is used for folding and unfolding of the menu-card. On clicking an item in the unfolded menu, a small description of that item is popped up. A close button is provided to close the pop-up/menu-card. 
 
Feature

  • Browsers compatible
  • Working on touchscreen devices
  • Need not to use any external js, script, and libraries
  • SCSS & CSS both codes are available
  • Easy to use

Below is the code used to implement the concept.
 

HTML:

<div class="main-container">
  <div id="#main-wraper" class="main-wraper">

    <!-- Menu card -->
    <div class="menu-card">
      <!-- Cover Page -->
      <div class="cover-page">
        <!-- Front Page -->
        <div class="front-page">
          <div class="front-content">
            <div class="food-menu-content">

              <!-- Add Body content -->

              <div class="view-menu">
                <a href="javascript:void(0);" class="open-btn">Look Inside &#8594</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Front back Page -->
        <div class="front-page back-page">

          <!-- Add Body content -->

          <div class="side-overlay"></div>
        </div>
      </div>

      <!-- Middle Page -->
      <div class="middle-page">
        <div class="middle-page-content">
          <div class="middle-wraper">
            <div class="main-course-content">
              <div class="first-row">
                <a href="javascript:void(0);" class="popup">AngularJS Development Services</a>
              </div>
              <div class="first-row">
                <a href="javascript:void(0);">Custom Drupal Module Development</a>
              </div>
            </div>
          </div>
        </div>
        <div class="side-overlay"></div>
      </div>

      <!-- Right Page -->
      <div class="right-page">
        <!-- Right Blank Page -->
        <div class="right-blank-page"></div>

        <!-- Right Front Page -->
        <div class="right-front-page">
          <span class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></span>

          <!-- Add Body content -->

          <div class="side-overlay"></div>
        </div>
      </div>
    </div>
    <!-- Menu card end -->

    <!-- After click content -->
    <div class="after-click-content">
      <div class="inner-content">
        <span class="after-close"><i class="fa fa-times" aria-hidden="true"></i></span>
        <h2>ANGULARJS DEVELOPMENT SERVICES</h2>
        <p>AngularJS is an open source structural framework for web application to create RICH Internet Applications. It predominates the development of dynamic and single page application and supporting MVC to develop client side applications.s</p>
      </div>
    </div><!-- After click end -->
  </div>
</div>

 

CSS:
 
(Get CSS code from  JSFiddle demo)

Javascript:
  // Open btn
  jQuery('.open-btn').click(function() {
    jQuery('.menu-card').addClass('menu-card-shadow');
    jQuery('.cover-page').addClass('cover-in');
    jQuery('.cover-page').removeClass('cover-out');
    jQuery('.right-page').addClass('right-in');
    jQuery('.right-page').removeClass('rigt-out');
    jQuery('.back-page, .right-front-page').addClass('flip-back-page');
  });

  // Close btn
  jQuery('.close-btn').click(function() {
    jQuery('.menu-card').removeClass('menu-card-shadow');
    jQuery('.cover-page').addClass('cover-out');
    jQuery('.cover-page').removeClass('cover-in');
    jQuery('.right-page').addClass('rigt-out');
    jQuery('.right-page').removeClass('right-in');
    jQuery('.back-page, .right-front-page').removeClass('flip-back-page');
    jQuery('.after-click-content').removeClass('after-click');
    jQuery('.menu-card').removeClass('bg-effect');
  });

  // After click on inner link effect
  // Open btn
  jQuery('.popup').click(function() {
    jQuery('.after-click-content').addClass('after-click');
    jQuery('.menu-card').addClass('bg-effect');
  });
  // Close btn
  jQuery('.after-close').click(function() {
    jQuery('.after-click-content').removeClass('after-click');
    jQuery('.menu-card').removeClass('bg-effect');
  });

 

Snapshots of the 3D menu card:
 

3D menu card cover
3D menu card unfolding
3D menu card unfolded
3D menu card popup (onclick of an item).

Please click here for Demo. Hope this helps you well, feel free to add your comments/feedbacks. Need more assistance regarding Web Design Service Get in touch today!