← 動的パーツギャラリーへ戻る

パーツ番号 08-05-03 ・ JavaScript使用

3D本(ブック)めくり演出

ボタン操作でページが本のように奥へめくれ、次のコンテンツが現れます。会社案内や事例紹介のストーリー性のある見せ方に使えます。

js

プレビュー

ソースコード

HTML

<div class="d08-05-03-wrap">
          <div class="d08-05-03-book">
            <div class="d08-05-03-base">第1章<br>はじめに</div>
            <div class="d08-05-03-next">第2章<br>導入事例</div>
            <div class="d08-05-03-page" id="d08-05-03-page">
              <div class="d08-05-03-side d08-05-03-pf">目次</div>
              <div class="d08-05-03-side d08-05-03-pb">続きを読む</div>
            </div>
          </div>
          <button type="button" class="d08-05-03-btn">ページをめくる</button>
        </div>

CSS

.d08-05-03-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
        .d08-05-03-book{position:relative;width:180px;height:130px;perspective:900px}
        .d08-05-03-base,.d08-05-03-next{position:absolute;top:0;width:90px;height:130px;display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;border-radius:4px}
        .d08-05-03-base{left:0;background:#eef2ff;color:#4338ca}
        .d08-05-03-next{right:0;background:#f0fdf4;color:#15803d}
        .d08-05-03-page{position:absolute;right:0;top:0;width:90px;height:130px;transform-style:preserve-3d;transform-origin:left center;transition:transform .8s ease;z-index:2}
        .d08-05-03-side{position:absolute;inset:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-size:11px;text-align:center;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.1)}
        .d08-05-03-pf{background:#fff;color:#475569}
        .d08-05-03-pb{background:#fafaf9;color:#475569;transform:rotateY(180deg)}
        .d08-05-03-page.d08-05-03-flipped{transform:rotateY(-180deg)}
        .d08-05-03-btn{padding:7px 16px;border:none;border-radius:999px;background:#1e293b;color:#fff;font-size:11px;cursor:pointer}

JavaScript

(function(){
        var root=document.getElementById('item-08-05-03');if(!root)return;
        var page=root.querySelector('#d08-05-03-page');
        var btn=root.querySelector('.d08-05-03-btn');
        btn.addEventListener('click',function(){
          page.classList.toggle('d08-05-03-flipped');
        });
      })();

クラス名 .d08-05-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。