टेक्स्ट स्क्रैम्बल प्रभाव

666 ytr3d3

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

21 October 2024

ग्लोइंग टेक्स्ट इफेक्ट

HTML

CSS

JS

// ——————————————————————————————————————————————————
// TextScramble
// ——————————————————————————————————————————————————

class TextScramble {
  constructor(el) {
    this.el = el;
    this.chars = '!<>-_\\/[]{}—=+*^?#________';
    this.update = this.update.bind(this);
  }
  setText(newText) {
    const oldText = this.el.innerText;
    const length = Math.max(oldText.length, newText.length);
    const promise = new Promise(resolve => this.resolve = resolve);
    this.queue = [];
    for (let i = 0; i < length; i++) {
      const from = oldText[i] || '';
      const to = newText[i] || '';
      const start = Math.floor(Math.random() * 40);
      const end = start + Math.floor(Math.random() * 40);
      this.queue.push({ from, to, start, end });
    }
    cancelAnimationFrame(this.frameRequest);
    this.frame = 0;
    this.update();
    return promise;
  }
  update() {
    let output = '';
    let complete = 0;
    for (let i = 0, n = this.queue.length; i < n; i++) {
      let { from, to, start, end, char } = this.queue[i];
      if (this.frame >= end) {
        complete++;
        output += to;
      } else if (this.frame >= start) {
        if (!char || Math.random() < 0.28) {
          char = this.randomChar();
          this.queue[i].char = char;
        }
        output += `<span class="dud">${char}</span>`;
      } else {
        output += from;
      }
    }
    this.el.innerHTML = output;
    if (complete === this.queue.length) {
      this.resolve();
    } else {
      this.frameRequest = requestAnimationFrame(this.update);
      this.frame++;
    }
  }
  randomChar() {
    return this.chars[Math.floor(Math.random() * this.chars.length)];
  }}

// ——————————————————————————————————————————————————
// Example
// ——————————————————————————————————————————————————

const phrases = [
'Lola_Kola_555,',
'Hentai',
'I Like You',
'just as I did',
'that there\'s a difference',
'between knowing the path',
'and walking the path',
''];

const el = document.querySelector('.text');
const fx = new TextScramble(el);

next();

टेक्स्ट स्क्रैम्बल प्रभाव

अनुशंसित

ड्रॉपडाउन मेनू प्रभाव

सोशल आइकन पर प्रकाश प्रभाव

ग्लोइंग टेक्स्ट इफेक्ट

HTML

CSS

JS

अनुशंसित

ड्रॉपडाउन मेनू प्रभाव

सोशल आइकन पर प्रकाश प्रभाव

ग्लोइंग टेक्स्ट इफेक्ट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS