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

タイプライター単語書き換え

カーソルが点滅しながら単語をタイプし、消してから次の単語を打ち直し続けます。WordPressの自己紹介文やスキル一覧のヒーロー演出に定番の手法です。

autojs

プレビュー

ソースコード

HTML

<div class="d02-11-08-line"><span class="d02-11-08-text"></span><span class="d02-11-08-cursor"></span></div>

CSS

.d02-11-08{background:#0f172a}
        .d02-11-08-line{font-family:ui-monospace,Menlo,monospace;font-size:24px;font-weight:700;color:#e2e8f0}
        .d02-11-08-cursor{display:inline-block;width:3px;height:1em;background:#22d3ee;margin-left:3px;vertical-align:-3px;animation:d1178blink 1s step-end infinite}
        @keyframes d1178blink{0%,50%{opacity:1}51%,100%{opacity:0}}
        @media (prefers-reduced-motion: reduce){
          .d02-11-08-cursor{animation:none;opacity:1}
        }

JavaScript

(function(){
        var text=document.querySelector('#item-02-11-08 .d02-11-08-text');
        var words=['丁寧に、','素早く、','伴走します。'];
        var reduce=window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
        if(reduce){text.textContent=words.join('');return;}
        var wi=0;
        function type(word,i,cb){
          if(i<=word.length){text.textContent=word.slice(0,i);setTimeout(function(){type(word,i+1,cb);},90);}
          else{setTimeout(cb,900);}
        }
        function erase(word,i,cb){
          if(i>=0){text.textContent=word.slice(0,i);setTimeout(function(){erase(word,i-1,cb);},50);}
          else{setTimeout(cb,300);}
        }
        function loop(){
          var word=words[wi];
          type(word,0,function(){
            erase(word,word.length,function(){
              wi=(wi+1)%words.length;
              loop();
            });
          });
        }
        loop();
      })();

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