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

タイプライター風自動入力テキスト

1文字ずつ打ち込まれ、最後まで表示すると消えてまた最初から入力し直します。WordPressのヒーロー見出しでキャッチコピーを複数見せたいときに便利です。

jsinput

プレビュー

ソースコード

HTML

<div class="d02-02-11-line"><span class="d02-02-11-txt"></span><span class="d02-02-11-cur">|</span></div>

CSS

.d02-02-11{background:#111827}
        .d02-02-11-line{display:flex;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;color:#4ade80;font-weight:700}
        .d02-02-11-cur{margin-left:2px;animation:d1537blink 1s step-end infinite}
        @keyframes d1537blink{0%,100%{opacity:1}50%{opacity:0}}

JavaScript

(function(){
        var el=document.querySelector('#item-02-02-11 .d02-02-11-txt');if(!el)return;
        var words=['集客するサイトを。','売上を伸ばすEC。','伝わるデザイン。'];
        var wi=0,ci=0,deleting=false;
        function tick(){
          var w=words[wi];
          if(!deleting){
            ci++;el.textContent=w.slice(0,ci);
            if(ci===w.length){deleting=true;setTimeout(tick,1400);return;}
          }else{
            ci--;el.textContent=w.slice(0,ci);
            if(ci===0){deleting=false;wi=(wi+1)%words.length;}
          }
          setTimeout(tick,deleting?45:80);
        }
        tick();
      })();

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