パーツ番号 02-17-16 ・ JavaScript使用

スポットライト巡回見出しセット

ボタンを押すたびに、h2→h3→h4→全体表示の順で1レベルだけを明るく残し他を減光するスポットライトが巡回する。FAQのように複数階層を順番に説明したい場面で、視線を1つずつ誘導できる。

clickjs

プレビュー

ソースコード

HTML

<div class="d02-17-16-stage">
          <div class="set">
            <p class="lv2">FAQ</p>
            <p class="lv3">支払い方法</p>
            <p class="lv4">領収書の発行</p>
          </div>
          <button type="button" class="d02-17-16-btn">クリックで順番にハイライト</button>
        </div>

CSS

.d02-17-16 .d02-17-16-stage{ width:100%; }
        .d02-17-16 .set{ width:100%; display:flex; flex-direction:column; gap:14px; }
        .d02-17-16 .lv2,.d02-17-16 .lv3,.d02-17-16 .lv4{ margin:0; transition:opacity .4s ease; }
        .d02-17-16 .lv2{ font-size:22px; font-weight:800; color:#1f2937; }
        .d02-17-16 .lv3{ font-size:17px; font-weight:700; color:#374151; padding-left:14px; }
        .d02-17-16 .lv4{ font-size:14px; font-weight:700; color:#4b5563; padding-left:28px; }
        .d02-17-16 .set.d02-17-16-dim .lv2,
        .d02-17-16 .set.d02-17-16-dim .lv3,
        .d02-17-16 .set.d02-17-16-dim .lv4{ opacity:.3; }
        .d02-17-16 .set.d02-17-16-dim .lv2.d02-17-16-active,
        .d02-17-16 .set.d02-17-16-dim .lv3.d02-17-16-active,
        .d02-17-16 .set.d02-17-16-dim .lv4.d02-17-16-active{ opacity:1; }
        .d02-17-16 .d02-17-16-btn{ display:block; margin:14px auto 0; padding:8px 18px; font-size:12px; font-weight:700; letter-spacing:.06em; color:#fff; background:#1f2937; border:none; border-radius:20px; cursor:pointer; }

JavaScript

(function(){
        var set = document.querySelector('#item-02-17-16 .set');
        var btn = document.querySelector('#item-02-17-16 .d02-17-16-btn');
        if(!set || !btn) return;
        var levels = [set.querySelector('.lv2'), set.querySelector('.lv3'), set.querySelector('.lv4')];
        var step = -1;
        btn.addEventListener('click', function(){
          step = (step + 1) % 4;
          levels.forEach(function(el){ el.classList.remove('d02-17-16-active'); });
          if(step === 3){
            set.classList.remove('d02-17-16-dim');
          } else {
            set.classList.add('d02-17-16-dim');
            levels[step].classList.add('d02-17-16-active');
          }
        });
      })();

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