パーツ番号 01-13-07 ・ JavaScript使用

観音開き分割演出

クリックすると中央から左右に扉が割れて開き、背後のコンテンツが現れる演出。キャンペーンLPの導入演出や特典解禁UIに向いています。

clickjs

プレビュー

ソースコード

HTML

<div class="d01-13-07-wrap">
          <div class="d01-13-07-content">
            <h4>SPECIAL OFFER</h4>
            <p>クリックして扉を開く</p>
          </div>
          <div class="d01-13-07-door d01-13-07-left"><span>CLICK</span></div>
          <div class="d01-13-07-door d01-13-07-right"><span>CLICK</span></div>
        </div>

CSS

.prev.d01-13-07{padding:0}
        .d01-13-07-wrap{position:relative;width:100%;height:230px;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,#facc15,#f59e0b)}
        .d01-13-07-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#78350f;padding:0 20px;box-sizing:border-box}
        .d01-13-07-content h4{font-size:16px;font-weight:800;margin-bottom:8px}
        .d01-13-07-content p{font-size:12px;opacity:.85;margin:0}
        .d01-13-07-door{position:absolute;top:0;bottom:0;width:50%;background:#111827;display:flex;align-items:center;justify-content:center;transition:transform .6s cubic-bezier(.2,.7,.3,1);z-index:2}
        .d01-13-07-door span{color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;opacity:.8}
        .d01-13-07-left{left:0;transform:translateX(0)}
        .d01-13-07-right{right:0;transform:translateX(0)}
        .d01-13-07-wrap.is-open .d01-13-07-left{transform:translateX(-100%)}
        .d01-13-07-wrap.is-open .d01-13-07-right{transform:translateX(100%)}

JavaScript

(function(){
        var root=document.getElementById('item-01-13-07');if(!root)return;
        var wrap=root.querySelector('.d01-13-07-wrap');
        wrap.addEventListener('click',function(){
          wrap.classList.toggle('is-open');
        });
      })();

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