パーツ番号 02-11-09 ・ JavaScript使用

ウェーブレター切替テキスト

文字が左から右へ波打つようなタイミングでめくれ、次の単語へ変化し続けます。WordPressのクリエイティブ系ポートフォリオの見出しに動きのアクセントを加えます。

autojs

プレビュー

ソースコード

HTML

<div class="d02-11-09-txt"></div>

CSS

.d02-11-09{background:#1e1b4b}
        .d02-11-09-txt{font-family:ui-monospace,Menlo,monospace;font-size:24px;font-weight:800;color:#f472b6;letter-spacing:2px}
        .d02-11-09-txt span{display:inline-block;transition:transform .25s ease,opacity .25s ease}
        @media (prefers-reduced-motion: reduce){
          .d02-11-09-txt span{transition:none}
        }

JavaScript

(function(){
        var el=document.querySelector('#item-02-11-09 .d02-11-09-txt');
        var words=['CREATIVE','DESIGN','STUDIO'];
        var len=Math.max.apply(null,words.map(function(w){return w.length;}));
        function pad(w){return (w+'        ').slice(0,len);}
        var spans=[];
        for(var i=0;i<len;i++){var s=document.createElement('span');s.textContent=' ';el.appendChild(s);spans.push(s);}
        var reduce=window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
        var wi=0;
        function setWord(w){
          var padded=pad(w);
          spans.forEach(function(s,i){
            if(reduce){s.textContent=padded[i];return;}
            setTimeout(function(){
              s.style.transform='translateY(-10px)';s.style.opacity='0';
              setTimeout(function(){s.textContent=padded[i];s.style.transform='translateY(0)';s.style.opacity='1';},140);
            },i*60);
          });
        }
        setWord(words[0]);
        if(!reduce){
          setInterval(function(){wi=(wi+1)%words.length;setWord(words[wi]);},len*60+1800);
        }
      })();

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