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

文字並び替えシャッフルテキスト

文字の並び順がランダムに入れ替わり、ノイズのように暴れたあと正しい順序へ戻ります。WordPressのセキュリティ・暗号・解析系サービスサイトの見出しに使うと不穏な緊張感を演出できます。

jsdark

プレビュー

ソースコード

HTML

<div class="d02-09-11-board"></div>

CSS

.d02-09-11{background:#0c0d1a;display:flex;align-items:center;justify-content:center}
        .d02-09-11-board{display:flex;gap:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:30px;font-weight:900;letter-spacing:1px}
        .d02-09-11-board .ch{display:inline-block;color:#39e6ff;text-shadow:0 0 8px rgba(57,230,255,.5)}
        @media (prefers-reduced-motion: reduce){
          .d02-09-11-board .ch{text-shadow:none}
        }

JavaScript

(function(){
        var root = document.getElementById('item-02-09-11');
        if(!root) return;
        var board = root.querySelector('.d02-09-11-board');
        if(!board) return;
        var word = 'CIPHER';
        var spans = [];
        for(var i = 0; i < word.length; i++){
          var s = document.createElement('span');
          s.className = 'ch';
          s.textContent = word[i];
          s.style.order = i;
          board.appendChild(s);
          spans.push(s);
        }
        var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        if(reduce) return;
        function shuffleOnce(){
          var ticks = 0;
          var maxTicks = 10;
          var timer = setInterval(function(){
            for(var i = 0; i < spans.length; i++){
              spans[i].style.order = Math.floor(Math.random() * spans.length * 2);
            }
            ticks++;
            if(ticks >= maxTicks){
              clearInterval(timer);
              for(var i = 0; i < spans.length; i++){ spans[i].style.order = i; }
            }
          }, 70);
        }
        shuffleOnce();
        setInterval(shuffleOnce, 3200);
      })();

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