パーツ番号 08-02-05 ・ JavaScript使用
カーテン遷移演出
左右から幕が閉じて開くページ遷移風の演出。WordPressテーマのページ切り替え時に挟むと高級感のあるサイトになります。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。