Webleb - UI Elements - Effect Auto-Typing

HTML CSS JS

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);

Preview

Open Advanced Editor Full Screen

HTML CSS JS

setTimeout(type, typeSpeed);
}

document.addEventListener('DOMContentLoaded', type);

Preview

Validating your code, please wait...