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

パーツ番号 08-04-09 ・ JavaScript使用

カラーフラッシュ遷移

ブランドカラーが一瞬フラッシュしてページが切り替わる演出。キャンペーンLPからフォームへの遷移に。

jsinput

プレビュー

ソースコード

HTML

<div class="d08-04-09-stage">
          <div class="d08-04-09-page d08-04-09-a">
            <strong>ランディング</strong>
            <p>キャンペーンLP</p>
          </div>
          <div class="d08-04-09-page d08-04-09-b">
            <strong>申込みフォーム</strong>
            <p>お申し込みはこちら</p>
          </div>
          <div class="d08-04-09-flash"></div>
          <button type="button" class="d08-04-09-btn">申し込む</button>
        </div>

CSS

.prev.d08-04-09{padding:0;}
        .d08-04-09-stage{position:absolute;inset:0;overflow:hidden;font-family:sans-serif;}
        .d08-04-09-page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;transition:opacity .2s ease;}
        .d08-04-09-a{background:linear-gradient(135deg,#0ea5e9,#0369a1);opacity:1;}
        .d08-04-09-b{background:linear-gradient(135deg,#f43f5e,#be123c);opacity:0;}
        .d08-04-09-stage.is-b .d08-04-09-a{opacity:0;}
        .d08-04-09-stage.is-b .d08-04-09-b{opacity:1;}
        .d08-04-09-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5;}
        .d08-04-09-flash.is-flash{animation:d519flash .5s ease;}
        @keyframes d519flash{0%{opacity:0;}40%{opacity:1;}100%{opacity:0;}}
        .d08-04-09-page strong{font-size:18px;}
        .d08-04-09-page p{font-size:12px;margin:0;opacity:.85;}
        .d08-04-09-btn{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;border:none;border-radius:999px;padding:6px 16px;font-size:12px;background:#fff;color:#333;cursor:pointer;}

JavaScript

(function(){
          var box=document.currentScript.closest('.item').querySelector('.d08-04-09');
          var stage=box.querySelector('.d08-04-09-stage');
          var flash=box.querySelector('.d08-04-09-flash');
          var btn=box.querySelector('.d08-04-09-btn');
          var on=false;
          btn.addEventListener('click',function(){
            flash.classList.add('is-flash');
            setTimeout(function(){
              on=!on;
              stage.classList.toggle('is-b',on);
              btn.textContent=on?'戻る':'申し込む';
            },200);
            setTimeout(function(){ flash.classList.remove('is-flash'); },500);
          });
        })();

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