紙のページをめくるような動き

概要

• クリックすると紙の書類をめくるようにページを送る
• 実際の書類を読むときのように、初期配置と送ったページでz-indexを反転させる
• jQuery使用
• クリックしたときのページの重なり順など改善予定

デモ

http://codepen.io/viscosenpai/pen/bqNvdy

コード

index.html

<div id="wrapper">
  <section class="page">
    <h1>Title-1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ad totam dolores voluptatem sint voluptate saepe qui? At quas rerum magnam iusto, illum. Vel quidem nisi eum ipsam quae blanditiis.</p>
  </section>
  <section class="page">
    <h1>Title-2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ad totam dolores voluptatem sint voluptate saepe qui? At quas rerum magnam iusto, illum. Vel quidem nisi eum ipsam quae blanditiis.</p>
  </section>
  <section class="page">
    <h1>Title-3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ad totam dolores voluptatem sint voluptate saepe qui? At quas rerum magnam iusto, illum. Vel quidem nisi eum ipsam quae blanditiis.</p>
  </section>
  <section class="page">
    <h1>Title-4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ad totam dolores voluptatem sint voluptate saepe qui? At quas rerum magnam iusto, illum. Vel quidem nisi eum ipsam quae blanditiis.</p>
  </section>
  <section class="page">
    <h1>Title-5</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ad totam dolores voluptatem sint voluptate saepe qui? At quas rerum magnam iusto, illum. Vel quidem nisi eum ipsam quae blanditiis.</p>
  </section>
</div>

style.css

#wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 0;
}
.page {
  background: #fff;
  border: 1px solid #ccc;
  padding: 15px;
  position: absolute;
  width: 50%;
  height: 100vh;
  top: 0;
  left: 50%;
  transition: left .3s linear;
}
.read {
  left: 0;
  z-index: 1;
}

script.js

var pages = $('.page');
var pageNum = pages.length;
var readPage = 0;
pages.each(function(i) {
  $(this).css('z-index', pageNum - i);
});
pages.on('click', function() {
  $(this).toggleClass('read');
  if ($(this).hasClass('read')) {
    $(this).css('z-index', $('.read').length);
  } else {
    $(this).css('z-index', pageNum - $('.read').length);
  }
});

最後に

もうちょっと工夫します。