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

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

カーテン遷移演出

左右から幕が閉じて開くページ遷移風の演出。WordPressテーマのページ切り替え時に挟むと高級感のあるサイトになります。

js

プレビュー

ソースコード

HTML

<div class="d08-02-05-stage">
          <p class="d08-02-05-content">ページのコンテンツ</p>
          <div class="d08-02-05-curtain d08-02-05-left"></div>
          <div class="d08-02-05-curtain d08-02-05-right"></div>
          <span class="d08-02-05-logo">LOADING</span>
        </div>
        <button type="button" class="d08-02-05-btn">遷移を再生</button>

CSS

.d08-02-05{flex-direction:column;gap:14px}
        .d08-02-05-stage{
          position:relative;width:100%;max-width:280px;height:150px;border-radius:10px;
          overflow:hidden;background:#eef2ff;display:flex;align-items:center;justify-content:center;
        }
        .d08-02-05-content{margin:0;font-size:14px;color:#4f46e5;font-weight:700}
        .d08-02-05-curtain{
          position:absolute;top:0;width:50%;height:100%;background:#312e81;
          transform:scaleX(0);transition:transform .5s cubic-bezier(.7,0,.3,1);
        }
        .d08-02-05-left{left:0;transform-origin:left}
        .d08-02-05-right{right:0;transform-origin:right}
        .d08-02-05-stage.d08-02-05-closed .d08-02-05-curtain{transform:scaleX(1)}
        .d08-02-05-logo{
          position:absolute;color:#fff;font-size:13px;letter-spacing:.3em;
          opacity:0;transition:opacity .3s .3s;pointer-events:none;
        }
        .d08-02-05-stage.d08-02-05-closed .d08-02-05-logo{opacity:1}
        .d08-02-05-btn{
          padding:9px 22px;border:none;border-radius:999px;background:#4f46e5;color:#fff;
          font-size:13px;cursor:pointer;
        }
        .d08-02-05-btn:hover{background:#4338ca}

JavaScript

(function(){
        var stage=document.querySelector('.d08-02-05 .d08-02-05-stage');
        var btn=document.querySelector('.d08-02-05 .d08-02-05-btn');
        if(!stage||!btn)return;
        var busy=false;
        btn.addEventListener('click',function(){
          if(busy)return;
          busy=true;
          stage.classList.add('d08-02-05-closed');
          setTimeout(function(){
            stage.classList.remove('d08-02-05-closed');
            setTimeout(function(){busy=false;},600);
          },1100);
        });
      })();

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