Sample code Typing Effects

HTML

CSS

JavaScript

$(document).ready(function() {
    const texts = [
        'fun',
        'challenging',
        'creative',
        'problem-solving',
        'logical',
        'rewarding',
        'the future',
        'empowering'
    ];

let textIndex = 0;  
    let charIndex = 0;  
    const typingSpeed = 150; 
    const erasingSpeed = 100; 
    const delayBetweenTexts = 1500; 
    
    const typingElement = $('#typing');
    
    function type() {
        if (charIndex < texts[textIndex].length) {
            typingElement.text(typingElement.text() + texts[textIndex].charAt(charIndex));
            charIndex++;
            setTimeout(type, typingSpeed);
        } else {
            setTimeout(erase, delayBetweenTexts); 
        }
    }

function erase() {
        if (charIndex > 0) {
            typingElement.text(texts[textIndex].substring(0, charIndex - 1));
            charIndex--;
            setTimeout(erase, erasingSpeed);
        } else {
            textIndex = (textIndex + 1) % texts.length; 
            setTimeout(type, typingSpeed);
        }
    }

setTimeout(type, delayBetweenTexts);
});

Preview: Sample code Typing Effects

By me a coffee

<body>

@polyxgo

PolyXGO