messme.js

Librería para la destrucción creativa de elementos HTML.

Uso desde CDN:

      
        <head>
        <script src="https://cdn.jsdelivr.net/gh/datadiego/messme.js/messme.js"></script>
        </head>

messme utiliza la clase Mess para configurar un selector que usarás para seleccionar el elemento que quieres destruir.

      
        const broken_text = new Mess(".mess", "loop", false);
        broken_text.setIdleTime(2000);
        broken_text.setMessDelay(100);
        broken_text.setFixDelay(100);
        broken_text.mess();

Puedes utilizar varias clases para configurar diferentes efectos:

      
        const mess = new Mess(".mess", "loop", false);
        mess.setIdleTime(1000);
        mess.setMessDelay(100);
        mess.setFixDelay(50);
        mess.setCharacters("█▓▒░βγδεζηθικ".split(""));
        mess.mess();
    
        const mess2 = new Mess(".mess2", "loop", false);
        mess2.setIdleTime(500);
        mess2.setMessDelay(100);
        mess2.setFixDelay(50);
        mess2.setCharacters("╔╗╚╝═".split(""));
        mess2.mess();
    
        const mess3 = new Mess(".mess3", "loop", false);
        mess3.setIdleTime(500);
        mess3.setMessDelay(100);
        mess3.setFixDelay(50);
        mess3.setCharacters("¿?¡!()[]{}-_.,;:@#$%&/=+*".split(""));
        mess3.mess();

⚠️ Aviso sobre messme.js ⚠️

Aunque messme.js no añade demasiada carga a tu página, no ha sido probado (ni creado) para entornos de producción.
Utiliza fuentes monospace para evitar los saltos de linea inesperados.
Incluso con fuentes monoespaciadas, algunos caracteres especiales pueden cambiar el alto de tu elemento, usar overflow: hidden junto a un line-height suficientemente alto deberia bastar para solucionarlo.
Generalmente, utiliza messme en elementos del DOM que contengan texto.
Puedes usarlo en contenedores con varios elementos, aunque messme es incapaz de recuperar el contenido de estos y seguirá añadiendo caracteres.

messme.js es un proyecto de código abierto, puedes ayudar al desarrollo en github.