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

波打つテキスト(ウェーブ)

各文字がサイン波の位相をずらして上下にうねり続けます。海・音楽・リラクゼーション系WordPressサイトの装飾見出しに向いています。

autojs

プレビュー

ソースコード

HTML

<div class="d02-02-02-wave" role="img" aria-label="WAVE MOTION"></div>

CSS

.d02-02-02-wave{font-size:34px;font-weight:900;color:#0f766e;letter-spacing:1px}
        .d02-02-02-wave span{display:inline-block;animation:d182wave 1.8s ease-in-out infinite}
        @keyframes d182wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

JavaScript

(function(){
        var el=document.querySelector('#item-02-02-02 .d02-02-02-wave');
        var txt='WAVE MOTION';
        el.innerHTML='';
        for(var i=0;i<txt.length;i++){
          var s=document.createElement('span');
          s.textContent=txt[i]===' '?' ':txt[i];
          s.style.animationDelay=(i*0.08)+'s';
          el.appendChild(s);
        }
      })();

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