Typewriter 03

Demo: https://codepen.io/hckkiu/pen/xxYbYQb

Tested on 7.1.

Add a Code Block > Use this code (With Personal Plan, you can add via Markdown Block)

<div class="tp-container">
  <p class="tp-typewriter">I'm a 
    <span data-text="web developer., designer., photographer."></span>
  </p>
</div>
<style>
  
.tp-container {
    --bg-color: #2E3D4B;
    --text-color: #6AE3FF;
}

.tp-container {
    min-width: 400px;
    height: 100vh;
    align-items: center;
    box-sizing: border-box;
    background: var(--bg-color);
    padding: 50px;
}

.tp-typewriter {
    font-size: 56px;
    color: #fff;
    font-weight: bold;
    position: relative;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
}

.tp-typewriter span {
    color: var(--text-color);
    text-transform: uppercase;
    padding: 10px;
    border-right: solid var(--text-color) 10px; 
    animation: cursor 1s ease-in-out infinite;
}

@keyframes cursor {
    from { border-color: var(--text-color); }
    to { border-color: transparent; }
}

@media (max-width: 576px) {
    .tp-typewriter { font-size: 24px; }
}
@media (max-width: 768px) {
    .tp-typewriter { font-size: 36px; }
}
</style>
<script>
  var span = document.querySelector(".tp-typewriter span");
var textArr = span.getAttribute("data-text").split(", "); 
var maxTextIndex = textArr.length; 

var sPerChar = 0.15; 
var sBetweenWord = 1.5;
var textIndex = 0; 

typing(textIndex, textArr[textIndex]); 

function typing(textIndex, text) {
    var charIndex = 0; 
    var maxCharIndex = text.length - 1; 
    
    var typeInterval = setInterval(function () {
        span.innerHTML += text[charIndex]; 
        if (charIndex == maxCharIndex) {
            clearInterval(typeInterval);
            setTimeout(function() { deleting(textIndex, text) }, sBetweenWord * 1000); 
            
        } else {
            charIndex += 1; 
        }
    }, sPerChar * 1000); 
}

function deleting(textIndex, text) {
    var minCharIndex = 0; 
    var charIndex = text.length - 1; 

    var typeInterval = setInterval(function () {
        span.innerHTML = text.substr(0, charIndex); 
        if (charIndex == minCharIndex) {
            clearInterval(typeInterval);
            textIndex + 1 == maxTextIndex ? textIndex = 0 : textIndex += 1; 
            setTimeout(function() { typing(textIndex, textArr[textIndex]) }, sBetweenWord * 1000); 
        } else {
            charIndex -= 1; 
        }
    }, sPerChar * 1000); 
}
</script>