Efecto de escritura automática | Gratis - Por Youssef Pl

302 youssefpl

Abrir en el editor Publica tu código

Efecto de escritura automática | Gratis - Por Youssef Pl

Recomendado

15 October 2025

Barra lateral de Glassmorphism HTML CSS Estilo Apple

22 November 2025

Plantilla HTML para clínica dental | Clínica Dontel

4 December 2025

Plantas vs Zombies sin jardín

HTML

CSS

const textElement = document.getElementById('text');
// النصوص الإنجليزية البديلة
const words = ["Welcome to our website", "We design the future", "Creativity knows no limits"];
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
let typeSpeed = 100;

function type() {
    const currentWord = words[wordIndex];
    
    if (isDeleting) {
        textElement.textContent = currentWord.substring(0, charIndex - 1);
        charIndex--;
        typeSpeed = 50; // سرعة الحذف
    } else {
        textElement.textContent = currentWord.substring(0, charIndex + 1);
        charIndex++;
        typeSpeed = 150; // سرعة الكتابة
    }

if (!isDeleting && charIndex === currentWord.length) {
        isDeleting = true;
        typeSpeed = 2000; // مدة التوقف عند اكتمال الكلمة
    } else if (isDeleting && charIndex === 0) {
        isDeleting = false;
        wordIndex = (wordIndex + 1) % words.length;
        typeSpeed = 500;
    }

setTimeout(type, typeSpeed);
}

document.addEventListener('DOMContentLoaded', type);