WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Glitch Text Animation
5091
webleb
Publish Your Code
Recommended
12 October 2025
CSS Animation Layers Example
22 May 2025
SVG Morphing animation
29 October 2025
HTML CSS Button Animation Example
index.html
Copy
Webleb
styles.css
Copy
* { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: 'Unica One', sans-serif; background: rgb(0, 0, 0); } .container { display: flex; align-items: center; justify-content: center; height: 100%; padding: 5rem; } .heading { color: #eee; font-size: 5rem; font-weight: 300; text-transform: uppercase; }
main.js
Copy
const resolver = { resolve: function resolve(options, callback) { // The string to resolve const resolveString = options.resolveString || options.element.getAttribute('data-target-resolver'); const combinedOptions = Object.assign({}, options, {resolveString: resolveString}); function getRandomInteger(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; function randomCharacter(characters) { return characters[getRandomInteger(0, characters.length - 1)]; }; function doRandomiserEffect(options, callback) { const characters = options.characters; const timeout = options.timeout; const element = options.element; const partialString = options.partialString; 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);