WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación de texto con efecto Glitch
5232
webleb
Video
Publica tu código
0
Recomendado
6 November 2024
Un sitio web donde puedes reproducir canciones.
16 January 2026
El juego de la traición de Friday Night Funkin' Black
26 April 2025
Un código de shasshan7236
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);