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

文字化けデコードテキスト

ランダムな記号から徐々に正しい文字へ収束し、しばらくすると再び崩れて繰り返します。WordPressの解析・セキュリティ・エンジニア紹介ページのローディング表現に最適です。

プレビュー

ソースコード

HTML

<div class="d02-09-03-txt" data-final="解析完了"></div>

CSS

.d02-09-03{background:#0a0a0a}
        .d02-09-03-txt{font-family:ui-monospace,Menlo,monospace;font-size:32px;font-weight:800;color:#39ff14;letter-spacing:3px;text-shadow:0 0 8px rgba(57,255,20,.6)}

JavaScript

(function(){
        var el=document.querySelector('#item-02-09-03 .d02-09-03-txt');
        var final=el.getAttribute('data-final');
        var chars='アイウエオ!<>-_\\/[]{}=+*^?#0123456789';
        var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        if(reduce){el.textContent=final;return;}
        function run(){
          var frame=0,resolved=0;
          var timer=setInterval(function(){
            var out='';
            for(var i=0;i<final.length;i++){
              if(i<resolved){out+=final[i];}
              else{out+=chars[Math.floor(Math.random()*chars.length)];}
            }
            el.textContent=out;
            frame++;
            if(frame%3===0)resolved++;
            if(resolved>final.length){clearInterval(timer);el.textContent=final;setTimeout(run,2200);}
          },45);
        }
        run();
      })();

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