ग्लिच टेक्स्ट एनिमेशन

4559 webleb

अपना कोड प्रकाशित करें

अनुशंसित

6 November 2024

टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस

index.html

styles.css

main.js

let iterations = options.iterations;

setTimeout(() => {
        if (iterations >= 0) {
          const nextOptions = Object.assign({}, options, {iterations: iterations - 1});

// Ensures partialString without the random character as the final state.
          if (iterations === 0) {
            element.textContent = partialString;
          } else {
            // Replaces the last character of partialString with a random character
            element.textContent = partialString.substring(0, partialString.length - 1) + randomCharacter(characters);
          }

doRandomiserEffect(nextOptions, callback)
        } else if (typeof callback === "function") {
          callback(); 
        }
      }, options.timeout);
    };
    
    function doResolverEffect(options, callback) {
      const resolveString = options.resolveString;
      const characters = options.characters;
      const offset = options.offset;
      const partialString = resolveString.substring(0, offset);
      const combinedOptions = Object.assign({}, options, {partialString: partialString});

doRandomiserEffect(combinedOptions, () => {
        const nextOptions = Object.assign({}, options, {offset: offset + 1});

if (offset <= resolveString.length) {
          doResolverEffect(nextOptions, callback);
        } else if (typeof callback === "function") {
          callback();
        }
      });
    };

doResolverEffect(combinedOptions, callback);
  } 
}

const strings = [
  'WebLeb',
  'Order A Website Now',
  'Download Free Code',
  'Read Articles',
  'And Many More...'
];

let counter = 0;

const options = {
  // Initial position
  offset: 0,
  // Timeout between each random character
  timeout: 5,
  // Number of random characters to show
  iterations: 10,
  // Random characters to pick from
  characters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'x', 'y', 'x', '#', '%', '&', '-', '+', '_', '?', '/', '\\', '='],
  // String to resolve
  resolveString: strings[counter],
  // The element
  element: document.querySelector('[data-target-resolver]')
}

// Callback function when resolve completes
function callback() {
  setTimeout(() => {
    counter ++;
    
    if (counter >= strings.length) {
      counter = 0;
    }
    
    let nextOptions = Object.assign({}, options, {resolveString: strings[counter]});
    resolver.resolve(nextOptions, callback);
  }, 1000);
}

resolver.resolve(options, callback);

ग्लिच टेक्स्ट एनिमेशन

अनुशंसित

स्लाइस टेक्स्ट प्रभाव

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

टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस

index.html

styles.css

main.js

अनुशंसित

स्लाइस टेक्स्ट प्रभाव

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

टेक्स्ट एनिमेशन इन एचटीएमएल एंड सीएसएस

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js