Script Efecto Máquina de Escribir -

Script Efecto Máquina de Escribir para WordPress

Ejemplo de como se vería el tacto con el efecto

Script Efecto Máquina de Escribir. Este script te permite añadir un elegante y moderno efecto de máquina de escribir a cualquier página o entrada de WordPress. El código está optimizado para funcionar dentro de un solo bloque, ideal para constructores de páginas o para los que permiten código sin filtrar.

El efecto de escritura no es solo estético; es una herramienta poderosa para mejorar la experiencia del usuario y comunicar tu mensaje de forma más efectiva.

Capta la atención al instante: El movimiento del texto genera curiosidad y detiene al usuario para ver qué se va a escribir. Esto es ideal para títulos, eslóganes o llamadas a la acción.
Guía al lector: Al revelar el texto carácter por carácter, controlas el ritmo de la lectura y te aseguras de que el usuario preste atención a cada palabra importante.
Crea una experiencia dinámica: Rompe la monotonía del texto estático. Esto hace que tu web se sienta más interactiva, moderna y con vida, lo que puede aumentar el tiempo de permanencia en la página.
Refuerza tu marca: Puedes usarlo para presentar un eslogan de marca de forma memorable, un lema o un mensaje clave que definan tu negocio o proyecto.

Características principales

Minimalista: El efecto se genera con un código simple y limpio.
Personalizable: Puedes cambiar fácilmente el texto, la velocidad de escritura y el estilo visual.
Todo en uno: El HTML, CSS y JavaScript están en un solo bloque, facilitando su integración.

Código Completo del Script Efecto Máquina de Escribir

Copia todo el código que aparece a continuación y pégalo en un bloque de «HTML Personalizado» o en un bloque de «código» de tu constructor de páginas.

<style>
    /* Estilos del contenedor y del texto */
    .typewriter-container {
        font-size: 1.5rem; /* Tamaño de la fuente */
        color: #333; /* Color del texto */
        font-family: monospace;
        /* Se eliminaron 'white-space: nowrap;' y 'overflow: hidden;' para permitir el salto de línea */
    }

    /* Estilo para el cursor parpadeante */
    #cursor {
        animation: blink 1s infinite;
    }

    @keyframes blink {
        50% {
            opacity: 0;
        }
    }
</style>

<div class="typewriter-container">
    <span id="typewriter-text"></span><span id="cursor"></span>
</div>

<script>
    // Este script podría ser eliminado por el editor de WP
    document.addEventListener("DOMContentLoaded", () => {
        const textElement = document.getElementById("typewriter-text");
        const textToType = "Este es un texto para probar el efecto de escritura en WP. Configúralo a tu gusto.";
        let index = 0;
        let observer; // Variable para el observador

        function typeWriter() {
            if (index < textToType.length) {
                textElement.textContent += textToType.charAt(index);
                index++;
                setTimeout(typeWriter, 70); // Velocidad
            }
        }
        
        // Se asegura de que el script solo se ejecute si el elemento existe en la página
        if (textElement) {
            // Creamos un nuevo Intersection Observer
            observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    // Si el elemento es visible
                    if (entry.isIntersecting) {
                        typeWriter(); // Llamamos a la función typeWriter
                        observer.unobserve(entry.target); // Dejamos de observar el elemento para que solo se ejecute una vez
                    }
                });
            }, {
                // El efecto se activará cuando el 50% del elemento esté visible
                threshold: 0.5
            });

            // Seleccionamos el contenedor que queremos observar
            const typewriterContainer = document.querySelector('.typewriter-container');
            if (typewriterContainer) {
                observer.observe(typewriterContainer);
            }
        }
    });
</script>

Instrucciones de Personalización

Puedes modificar el efecto directamente en el código. A continuación, se detallan las partes que puedes editar:

1. Cambiar el texto

En la sección de JavaScript, busca la línea que dice: const textToType = "Este es un texto personalizable. ¡Cámbialo a tu gusto!";

Simplemente sustituye el texto entre comillas (" ") por la frase que desees mostrar.

2. Ajustar la velocidad

Para cambiar la velocidad del efecto, encuentra esta línea de código: setTimeout(typeWriter, 70);

El número 70 representa los milisegundos de retraso entre cada carácter.

Para que sea más rápido: Usa un número más bajo, por ejemplo, 40.
Para que sea más lento: Usa un número más alto, por ejemplo, 120.

3. Modificar el estilo visual

Puedes editar el tamaño, el color y la fuente en la sección <style> del código.

Tamaño de fuente: font-size: 2rem; (cambia 2rem por el tamaño que prefieras, por ejemplo, 1.5rem o 30px).
Color del texto: color: #333; (cambia #333 por el código de color que desees, por ejemplo, #fff para blanco).
Fuente del texto: font-family: monospace; (sustituye monospace por otra fuente, como Georgia, 'Arial', o una fuente de tu tema).

¿Necesitas poner varios textos con el SCRIPT EFECTO MÁQUINA DE ESCRIBIR? Efecto con retroceso

Paso 1: Código Completo (Pégalo una sola vez)

Copia todo este bloque de código y pégalo en un solo lugar de tu página (preferiblemente en un bloque de «HTML Personalizado» al inicio o al final de la página).

<style>
    /* Estilos del contenedor y del texto */
    .typewriter-container {
        font-size: 1.5rem;
        color: #333;
        font-family: monospace;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const typewriterElements = document.querySelectorAll(".typewriter-text");

        typewriterElements.forEach(element => {
            const textArrayString = element.getAttribute("data-text");
            const textArray = textArrayString.split(",");
            let textIndex = 0;
            let charIndex = 0;

            const typingSpeed = 70;
            const deletingSpeed = 40;
            const pauseTime = 1500;
            const initialDelay = 2000;

            function type() {
                if (textIndex < textArray.length) {
                    if (charIndex < textArray[textIndex].length) {
                        element.textContent += textArray[textIndex].charAt(charIndex);
                        charIndex++;
                        setTimeout(type, typingSpeed);
                    } else {
                        setTimeout(erase, pauseTime);
                    }
                }
            }

            function erase() {
                if (charIndex > 0) {
                    element.textContent = textArray[textIndex].substring(0, charIndex - 1);
                    charIndex--;
                    setTimeout(erase, deletingSpeed);
                } else {
                    textIndex++;
                    if (textIndex >= textArray.length) {
                        textIndex = 0;
                    }
                    setTimeout(type, typingSpeed);
                }
            }

            if (textArray.length > 0) {
                setTimeout(type, initialDelay);
            }
        });
    });
</script>

Paso 2: Bloque HTML (Copia y pega cuantas veces necesites)

Ahora, simplemente copia este bloque de HTML y pégalo en los lugares donde quieras el efecto de máquina de escribir. Cada bloque <div> es un texto diferente. Coloca los que necesites,

<div class="typewriter-container">
    <span class="typewriter-text" data-text="¡Hola a todos!,Este es el primer mensaje."></span>
</div>

<div class="typewriter-container">
    <span class="typewriter-text" data-text="Bienvenidos a mi página.,Aquí tienes el segundo mensaje."></span>
</div>

1. Personalizar el texto de cada bloque

Para cambiar el texto que se escribe, solo tienes que editar el atributo data-text en el bloque de HTML. Recuerda que cada frase debe ir separada por una coma.

Ejemplo de personalización:

HTML

<div class="typewriter-container">
    <span class="typewriter-text" data-text="Bienvenidos a nuestra web.,Explora nuestros servicios.,¡Esperamos que te guste!"></span>
</div>

<div class="typewriter-container">
    <span class="typewriter-text" data-text="El único modo de hacer un gran trabajo es amar lo que haces.,Steve Jobs."></span>
</div>

2. Personalizar la velocidad y las pausas

Para cambiar la velocidad del efecto, la velocidad de borrado y el tiempo de espera, tienes que editar la sección de «ajustes» dentro del código JavaScript que pegaste una sola vez.

JavaScript

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const typewriterElements = document.querySelectorAll(".typewriter-text");

        typewriterElements.forEach(element => {
            const textArrayString = element.getAttribute("data-text");
            const textArray = textArrayString.split(",");
            let textIndex = 0;
            let charIndex = 0;

            // --- AJUSTES QUE PUEDES PERSONALIZAR ---
            const typingSpeed = 70;      // Velocidad de escritura (número más bajo = más rápido)
            const deletingSpeed = 40;    // Velocidad de borrado (número más bajo = más rápido)
            const pauseTime = 1500;      // Pausa entre textos (en milisegundos)
            const initialDelay = 2000;   // Retraso al iniciar el efecto (en milisegundos)
            // ----------------------------------------

            // ... (el resto del script)
        });
    });
</script>

typingSpeed: Cambia este valor para que el texto se escriba más rápido o más lento.
deletingSpeed: Cambia este valor si quieres que el texto se borre más rápido o más lento.
pauseTime: Aumenta o disminuye este valor para que el script espere más o menos tiempo entre cada frase.
initialDelay: Modifica este valor si quieres que el efecto espere unos segundos al cargar la página antes de empezar a escribir.

Así se vería el efecto Script Efecto Máquina de Escribir con dos textos diferentes

👉 Más Utilidades Web

Comparte esta información:

WhatsApp X (Twitter) Facebook Email Telegram