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

グリッチノイズ風ワードスイッチャー

記号がノイズのように点滅しながら単語が切り替わるグリッチエフェクトです。WordPressのテック系・ゲーム系サイトの見出しに、デジタルなインパクトを加えたいときに使えます。

autojs

プレビュー

ソースコード

HTML

<div class="d02-11-12-txt"></div>

CSS

.d02-11-12{background:#0a0a0a}
        .d02-11-12-txt{font-family:ui-monospace,Menlo,monospace;font-size:26px;font-weight:800;color:#39ff88;letter-spacing:1px;white-space:pre}
        .d02-11-12-txt.is-glitch{text-shadow:2px 0 #ff2d55,-2px 0 #2dd4ff}

JavaScript

(function(){
        var root=document.getElementById('item-02-11-12');if(!root)return;
        var el=root.querySelector('.d02-11-12-txt');
        var words=['LAUNCH','CREATE','EVOLVE'];
        var glitchChars='#$%&*+=<>/\\|_';
        var reduce=window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
        var idx=0;
        el.textContent=words[0];
        if(reduce){return;}
        function glitchTo(target){
          el.classList.add('is-glitch');
          var ticks=0;
          var timer=setInterval(function(){
            var out='';
            for(var i=0;i<target.length;i++){
              out+=Math.random()<0.35?glitchChars[Math.floor(Math.random()*glitchChars.length)]:target[i];
            }
            el.textContent=out;
            ticks++;
            if(ticks>=6){
              clearInterval(timer);
              el.textContent=target;
              el.classList.remove('is-glitch');
            }
          },60);
        }
        function loop(){
          idx=(idx+1)%words.length;
          glitchTo(words[idx]);
          setTimeout(loop,2600);
        }
        setTimeout(loop,2200);
      })();

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