パーツ番号 06-14-11 ・ JavaScript使用

シェア後お礼メッセージ演出

シェア操作の直後にお礼のメッセージがふわっと入れ替わり表示される。キャンペーンや寄稿記事のシェア導線に。

プレビュー

ソースコード

HTML

<div class="d06-14-11-wrap">
          <button class="d06-14-11-btn" type="button">シェアする</button>
          <p class="d06-14-11-thanks">シェアありがとうございます!</p>
        </div>

CSS

.d06-14-11-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
        .d06-14-11-btn { border:none; border-radius:999px; background:#ec4899; color:#fff; padding:10px 20px; font-size:13px; font-weight:700; cursor:pointer; transition:opacity .25s ease; }
        .d06-14-11-btn.is-hide { opacity:0; pointer-events:none; position:absolute; }
        .d06-14-11-thanks { margin:0; font-size:13px; font-weight:700; color:#ec4899; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; }
        .d06-14-11-thanks.is-show { opacity:1; transform:translateY(0); }

JavaScript

(function(){
          var root = document.querySelector('.d06-14-11');
          var btn = root.querySelector('.d06-14-11-btn');
          var thanks = root.querySelector('.d06-14-11-thanks');
          var timer = null;
          btn.addEventListener('click', function(){
            btn.classList.add('is-hide');
            thanks.classList.add('is-show');
            clearTimeout(timer);
            timer = setTimeout(function(){
              btn.classList.remove('is-hide');
              thanks.classList.remove('is-show');
            }, 2400);
          });
        })();

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