パーツ番号 02-01-41 ・ JavaScript使用

パーティクル分解見出し

クリックすると見出しの文字が紙吹雪のように一瞬散らばり、すぐに元の並びへ再構成される演出。キャンペーンのCTAボタン隣接見出しなどクリックを誘いたい場面に。

clickjs

プレビュー

ソースコード

HTML

<div class="d02-01-41-stage">
          <h4 class="d02-01-41-h">SHATTER</h4>
          <button type="button" class="d02-01-41-btn">クリックで分解</button>
        </div>

CSS

.d02-01-41 .d02-01-41-stage{ text-align:center; }
        .d02-01-41 .d02-01-41-h{
          font-size:28px;
          font-weight:800;
          letter-spacing:.06em;
          color:#1a2333;
        }
        .d02-01-41 .d02-01-41-ch{
          display:inline-block;
          transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease;
        }
        .d02-01-41 .d02-01-41-btn{
          display:block;
          margin:14px auto 0;
          padding:8px 18px;
          font-size:12px;
          font-weight:700;
          letter-spacing:.06em;
          color:#fff;
          background:#1a2333;
          border:none;
          border-radius:20px;
          cursor:pointer;
        }

JavaScript

(function(){
        var h = document.querySelector('#item-02-01-41 .d02-01-41-h');
        var btn = document.querySelector('#item-02-01-41 .d02-01-41-btn');
        if(!h || !btn) return;
        var text = h.textContent;
        h.textContent = '';
        var chars = [];
        for(var i = 0; i < text.length; i++){
          var s = document.createElement('span');
          s.className = 'd02-01-41-ch';
          s.textContent = text[i] === ' ' ? ' ' : text[i];
          h.appendChild(s);
          chars.push(s);
        }
        btn.addEventListener('click', function(){
          chars.forEach(function(ch){
            var dx = (Math.random() - 0.5) * 160;
            var dy = (Math.random() - 0.5) * 120;
            var rot = (Math.random() - 0.5) * 180;
            ch.style.transform = 'translate(' + dx + 'px,' + dy + 'px) rotate(' + rot + 'deg)';
            ch.style.opacity = '0';
          });
          setTimeout(function(){
            chars.forEach(function(ch){
              ch.style.transform = 'translate(0,0) rotate(0deg)';
              ch.style.opacity = '1';
            });
          }, 650);
        });
      })();

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