JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

<h1 class="banner">I am a young, skilled front-end developer who loves building <span class="word-highlight" style="width: 156px"><span class="word">interactive</span></span> experiences.</h1>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:700); 
body {
    background-color: rgb(20, 20, 20);
    color: white;
}
h1 {
    font-family: 'Lato', sans-serif;
    text-align: center;
}
.word-highlight {
    position: relative;
    display: inline-block;
    color: lightblue;
    transition: 0.5s ease-out;
    height: 1em;
    overflow-x: visible;
    overflow-y: hidden;
}
.word {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: 0.2s;
}



/* Demo styles */
h1 {
    position: absolute;
    max-width: 900px;
    width: calc(100% - 100px);
    left: 50%;
    top: 40%;
    transform: translateX(-50%) translateY(-50%);
}

JavaScript

var wordBank = [
    "interactive",
    "cutting-edge",
    "responsive",
    "fun",
    "meaningful"
];
var currentNum = 0;
var wordHighlight = document.querySelector(".word-highlight");

function changeWordHighlight(index) {
	var prevWord = document.querySelector(".word");
    prevWord.style.transform = "translateX(-50%) translateY(100%)";
	
	var newWord = document.createElement("span");
    newWord.style.transform = "translateX(-50%) translateY(-100%)";
    newWord.className = "word";
    newWord.innerText = wordBank[index];
    wordHighlight.appendChild(newWord);
    
    wordHighlight.style.width = window.getComputedStyle(newWord).getPropertyValue("width");
    setTimeout(function() { newWord.style.transform = "translateX(-50%) translateY(0%)"; }, 0);
    
    prevWord.addEventListener("transitionend", function() {
    	wordHighlight.removeChild(prevWord);
    });
}

setInterval(function() {
	currentNum++;
    if(currentNum >= wordBank.length) {
    	currentNum = 0;
    }
	changeWordHighlight(currentNum);
}, 2000);