← 動的パーツギャラリーへ戻る

パーツ番号 02-15-12 ・ JavaScript使用

単語ごと時間差ドローイングコピー

キャッチコピーの単語が一つずつ時間差で明るくなり下線が引かれていきます。WordPressのファーストビューで短いメッセージにリズムをつけて印象づけられます。

js

プレビュー

ソースコード

HTML

<p class="d02-15-12-copy">
          <span class="d02-15-12-word">想いを、</span>
          <span class="d02-15-12-word">かたちに。</span>
          <span class="d02-15-12-word">未来へ。</span>
        </p>

CSS

.d02-15-12{background:#0f172a}
        .d02-15-12-copy{display:flex;flex-wrap:wrap;gap:6px;margin:0;font-size:24px;font-weight:900;color:#fff}
        .d02-15-12-word{position:relative;padding-bottom:6px;opacity:.35;transition:opacity .3s}
        .d02-15-12-word::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:#38bdf8;border-radius:2px;transform-origin:left;transform:scaleX(0)}
        .d02-15-12-word.d02-15-12-on{opacity:1}
        .d02-15-12-word.d02-15-12-on::after{animation:d1812draw .5s ease-out forwards}
        @keyframes d1812draw{to{transform:scaleX(1)}}
        @media (prefers-reduced-motion: reduce){
          .d02-15-12-word{opacity:1}
          .d02-15-12-word::after{transform:scaleX(1)!important;animation:none!important;transition:none}
        }

JavaScript

(function(){
        var words=document.querySelectorAll('.d02-15-12-word');
        if(!words.length)return;
        var i=0;
        function step(){
          words.forEach(function(w){w.classList.remove('d02-15-12-on');});
          for(var k=0;k<=i;k++){if(words[k])words[k].classList.add('d02-15-12-on');}
          i++;
          if(i>=words.length){
            setTimeout(function(){i=0;step();},1800);
          }else{
            setTimeout(step,500);
          }
        }
        step();
      })();

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