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

弾性スケール文字

画面に入ると各文字が1つずつバウンドしながら拡大して現れます。WordPressのスクロール連動見出しで元気で親しみやすい印象を作れます。

scrolljs

プレビュー

ソースコード

HTML

<div class="d02-02-08-txt" role="img" aria-label="BOUNCE"></div>

CSS

.d02-02-08-txt{font-size:42px;font-weight:900;color:#ea580c;letter-spacing:2px}
        .d02-02-08-txt span{display:inline-block;transform:scale(0);opacity:0}
        .d02-02-08.is-in .d02-02-08-txt span{animation:d188pop .6s cubic-bezier(.34,1.56,.64,1) forwards}
        @keyframes d188pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}

JavaScript

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

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