Based on HTML5 e-book paging animation effects,

Based on HTML5 e-book paging animation effects,

Today, we are going to share a cool HTML5 e-book page flip animation special effect. This HTML5 page flip animation can be used to drag the page with the mouse to simulate the manual page flip effect, you can also click the border of the book page to quickly flip the page. I have also shared a special HTML5 3D book page flip effect, with a strong 3D visual effect.

Download Online Preview source code

Implementation code.

Html code:

<div id="shineflip">      <div id="shineflip-pages">          <canvas id="shineflip-canvas"></canvas>          <canvas id="shineflip-page-mid-canvas"></canvas>          <section class="page">              <div></div>              <span style="left:18px;"></span>          </section>          <section class="page" style="background:url(images/left_pk.jpg)">              <div></div>          </section>          <section class="page">              <div></div>          </section>          <section class="page">              <div></div>          </section>          <section class="page">              <div></div>          </section>          <section class="page">              <div></div>          </section>          <section class="page" style="background:url(images/right_pk.jpg)">              <div></div>          </section>          <section class="page">              <div></div>              <span style="right:18px;"></span>          </section>      </div>  </div>

Via: http://www.w2bc.com/article/2015-12-31-html5-book-page