Glitched Text Transition- Random Character Cycling

glitched-text-transition-random-character-cycling.markdown

Glitched Text Transition- Random Character Cycling

Upon receiving a paragraph element from the HTML page, the script dissects the text, assigning each character to its own encapsulated span element. Through this separation, the script gains the ability to manipulate individual characters. The program randomly transforms characters, cycling through an array of non-alphabetic symbols such as punctuation marks, numerals, and special characters. The program adjusts the size and styling of characters, enhancing the visual impact. It achieves this through class list manipulation and CSS transition properties, facilitating seamless simultaneous animations. This approach ensures that each transformation unfolds smoothly without interfering with others. The end result is a glitchy animated transition reminiscent of the falling code from th matrix movie.

A Pen by Code_Nit_Whit on CodePen.

License.

index.html

<div class="container">
  <p class="regular-text transitioned-element">Forget the basic fade, this animation breaks the matrix. Prepare to be… marginally impressed.</p>
</div>

<span class="tip">Click the text to trigger the animation.</span>

script.js

const text = document.querySelector(".transitioned-element");

function transitionText() {
  const newText =
    "01000011 0110110 1111011 0010001 1001010 0100000 01101001 01110100 00100000 01101100 01101001 01100101 01100110 00101110 01001100 01101001 01110110 01100101 00101110 00100000 01000011 01101111 01100100 01100101 00101110";
  const scrambledCharacters =
    '(.__?/\\_,#"&gt;["__—$-~+}]__@<^__"=*!{&gt;.)0123456789';

  function setText() {
    const initialText = text.innerText;
    const maxTextLength = Math.max(initialText.length, newText.length);
    const characterQueue = [];
    let animationFrame = 0;
    for (let i = 0; i < maxTextLength; i++) {
      const originalCharacter = initialText[i] || "";
      const targetCharacter = newText[i] || "";
      const startTime = Math.random() * 40;
      const endTime = startTime + Math.random() * 40;
      characterQueue.push({
        original: originalCharacter,
        target: targetCharacter,
        start: startTime,
        end: endTime,
        scrambled: ""
      });
    }
    function updateAnimation() {
      let outputText = "";
      let completedCharacters = 0;
      for (const characterData of characterQueue) {
        const { original, target, start, end, scrambled } = characterData;
        if (animationFrame >= end) {
          completedCharacters++;
          outputText += target;
        } else if (animationFrame >= start) {
          const shouldScramble = !scrambled || Math.random() < 0.28;
          const scrambledChar = shouldScramble ? randomCharacter() : scrambled;
          characterData.scrambled = scrambledChar;
          outputText += `<span class="dud">${scrambledChar}</span>`;
        } else {
          outputText += original;
        }
      }
      text.innerHTML = outputText;
      if (completedCharacters === characterQueue.length) {
        //Just stand there and look stupid i guess
      } else {
        requestAnimationFrame(updateAnimation);
        animationFrame++;
      }
    }
    const initialOutputContainer = document.createElement("div");
    initialOutputContainer.innerHTML = text.innerHTML;
    updateAnimation();
  }
  function randomCharacter() {
    return scrambledCharacters[
      Math.floor(Math.random() * scrambledCharacters.length)
    ];
  }
  text.classList.add("glitched-text");
  text.classList.remove("regular-text");
  setText();
}

text.addEventListener("click", () => {
  transitionText();
});

style.css

body {
  background-color: black;
}

.container {
  width: 100vw;
  height: 100vh;
  text-align: center;
}

.tip {
  font-size: 1em;
  color: white;
  position: fixed;
  left: 0;
  bottom: 0;
}

.transitioned-element {
  width: 70%;
  min-width: 200px;
  margin: 25% auto;
}

.regular-text {
  color: white;
  font-family: "IBM Plex Serif", serif;
  font-size: 5vw;
  font-weight: 400;
  font-style: normal;
  cursor: pointer;
}

.glitched-text {
  transition: color, font-family, font-size 1s ease-out;
  transition: font-size 0.3s ease-out;
  color: green;
  font-size: 4vw;
  font-family: "Workbench", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "BLED" 0, "SCAN" 0;
}