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

スクランブル/デコード文字

ランダムな記号から正しい文字へ次々に収束していきます。テック系・セキュリティ系WordPressサイトのローディングや見出し演出に最適です。

プレビュー

ソースコード

HTML

<div class="d02-02-04-txt" data-final="DECODED">DECODED</div>

CSS

.d02-02-04{background:#0f172a}
        .d02-02-04-txt{font-family:monospace;font-size:38px;font-weight:800;color:#34d399;letter-spacing:3px}

JavaScript

(function(){
        var el=document.querySelector('#item-02-02-04 .d02-02-04-txt');
        var final=el.getAttribute('data-final');
        var chars='!<>-_\\/[]{}=+*^?#________';
        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,2000);}
          },40);
        }
        run();
      })();

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