パーツ番号 06-04-10 ・ JavaScript使用

サンクスメッセージポップ

ボタンを押すと「ありがとう!」のメッセージがハートと共にふわっと浮かんで消える。投げ銭・応援ボタンに。

clickjs

プレビュー

ソースコード

HTML

<div class="d06-04-10-wrap">
          <button class="d06-04-10-btn" type="button">ありがとうを送る</button>
          <div class="d06-04-10-stage"></div>
        </div>

CSS

.d06-04-10-wrap { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
        .d06-04-10-btn { border:none; background:#ec4899; color:#fff; border-radius:999px; padding:10px 18px; font-size:13px; cursor:pointer; z-index:1; }
        .d06-04-10-stage { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
        .d06-04-10-msg { position:absolute; bottom:40%; font-size:13px; font-weight:700; color:#ec4899; white-space:nowrap; animation:d540float 1.4s ease-out forwards; }
        @keyframes d540float {
          0% { opacity:0; transform:translateY(0) scale(.8); }
          15% { opacity:1; transform:translateY(-8px) scale(1); }
          100% { opacity:0; transform:translateY(-70px) scale(1.05); }
        }

JavaScript

(function(){
          var article = document.currentScript.closest('article');
          var root = article.querySelector('.d06-04-10');
          var btn = root.querySelector('.d06-04-10-btn');
          var stage = root.querySelector('.d06-04-10-stage');
          btn.addEventListener('click', function(){
            var msg = document.createElement('span');
            msg.className = 'd06-04-10-msg';
            msg.textContent = 'ありがとう! ♥';
            msg.style.left = (30 + Math.random()*40) + '%';
            stage.appendChild(msg);
            msg.addEventListener('animationend', function(){ msg.remove(); });
          });
        })();

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