Scramble Text

DEMO

CODE

<div class="demo-stage"><div class="sc-wrap"><div class="sc-text" id="scText">MOTION LAB</div><button class="sc-btn" onclick="scramble()">DECRYPT</button></div></div>

.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.sc-wrap { text-align:center; }
.sc-text { font-family:'JetBrains Mono',monospace; font-size:clamp(1.8rem,7vw,3.2rem); font-weight:500; color:#1A1A1A; min-height:1.2em; letter-spacing:.05em; }
.sc-btn { margin-top:1.5rem; padding:.75rem 2rem; background:#1A1A1A; color:#fff; border:none; font-family:'Oswald',sans-serif; letter-spacing:.2em; cursor:pointer; border-radius:6px; }

const scChars = '!?/[]{}=+*^#%@&$~';
function scramble(){
  const el = document.getElementById('scText');
  const target = el.dataset.value || el.textContent;
  el.dataset.value = target;
  const queue = [];
  for (let i = 0; i < target.length; i++){
    const start = Math.floor(Math.random() * 18);
    const end = start + Math.floor(Math.random() * 18) + 10;
    queue.push({ to: target[i], start: start, end: end, char: '' });
  }
  let frame = 0;
  function update(){
    let out = '', done = 0;
    for (let i = 0; i < queue.length; i++){
      const q = queue[i];
      if (frame >= q.end){ done++; out += q.to; }
      else if (frame >= q.start){
        if (!q.char || Math.random() < 0.3) q.char = scChars[Math.floor(Math.random() * scChars.length)];
        out += '<span style="color:#E91B89">' + q.char + '</span>';
      }
    }
    el.innerHTML = out;
    if (done < queue.length){ frame++; requestAnimationFrame(update); }
  }
  update();
}

AI PROMPT

テキストが暗号解読されるように現れる効果を作って。各文字に乱数でstart/endフレームを割り当て、startまでは非表示、start〜endはランダム記号（ピンク色）、end以降は正しい文字を表示。requestAnimationFrameで毎フレームframe++し、全文字doneで停止。等幅フォント＋min-heightでガタつき防止。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。