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

カラーサイクル見出し

クリックするたびに見出しの文字色があらかじめ用意した複数のブランドカラー間で切り替わる演出。カラーバリエーションのある商品紹介ページの見出しに。

clickjs

プレビュー

ソースコード

HTML

<div class="d02-01-31-stage">
          <h4 class="d02-01-31-h">お好みの色を、見つけて。</h4>
          <button type="button" class="d02-01-31-btn">クリックで色を切替</button>
        </div>

CSS

.d02-01-31 .d02-01-31-stage{ text-align:center; }
        .d02-01-31 .d02-01-31-h{
          font-size:24px;
          font-weight:800;
          letter-spacing:.04em;
          color:#2563eb;
          transition:color .4s ease;
        }
        .d02-01-31 .d02-01-31-btn{
          display:block;
          margin:14px auto 0;
          padding:8px 18px;
          font-size:12px;
          font-weight:700;
          letter-spacing:.06em;
          color:#1a2333;
          background:#fff;
          border:1.5px solid #cbd5e1;
          border-radius:20px;
          cursor:pointer;
        }

JavaScript

(function(){
        var h = document.querySelector('#item-02-01-31 .d02-01-31-h');
        var btn = document.querySelector('#item-02-01-31 .d02-01-31-btn');
        if(!h || !btn) return;
        var colors = ['#2563eb', '#f472b6', '#10b981', '#f97316', '#8b5cf6'];
        var idx = 0;
        btn.addEventListener('click', function(){
          idx = (idx + 1) % colors.length;
          h.style.color = colors[idx];
        });
      })();

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