I created a unique typing animation that displays text as if it's being typed on the screen, erased, and replaced with new text. While this effect works well, it's causing an issue where the width of containers below it also adjust based on the size of the typewriter text container.
document.addEventListener("DOMContentLoaded", function () {
var phrases = [
"phrase 1",
"phrase 2",
"phrase 3",
"phrase 4",
];
var speed = 50;
var flickerSpeed = 600;
var pauseBetweenPhrases = 2000;
var container = document.querySelector(".typewriter");
var bar = document.querySelector(".typewriter-bar");
var currentPhraseIndex = 0;
var charIndex = 0;
function typeWriter() {
if (charIndex < phrases[currentPhraseIndex].length) {
container.innerHTML +=
phrases[currentPhraseIndex].charAt(charIndex);
charIndex++;
setTimeout(typeWriter, speed);
} else {
setTimeout(function () {
backspace();
}, pauseBetweenPhrases);
}
}
function backspace() {
if (charIndex >= 0) {
container.innerHTML = phrases[currentPhraseIndex].substring(
0,
charIndex
);
charIndex--;
setTimeout(backspace, speed);
} else {
currentPhraseIndex = (currentPhraseIndex + 1) % phrases.length;
setTimeout(typeWriter, speed);
}
}
function flicker() {
bar.style.visibility =
bar.style.visibility === "visible" ? "hidden" : "visible";
setTimeout(flicker, flickerSpeed);
}
flicker();
typeWriter(); // Start the typewriter effect
});
html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: 'Hind Madurai', Arial, Helvetica, sans-serif;
}
h1 {
font-family: 'Poppins', Arial, Helvetica, sans-serif;
font-size: 10vh;
line-height: 1;
}
h2 {
font-family: 'Signika', Arial, Helvetica, sans-serif;
}
header {
background-color: white;
color: #222;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header h2 {
margin: 0;
font-weight: 300;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: right;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #222;
transition: color 0.3s ease;
}
nav a:hover {
color: #3ca6a6;
text-decoration: underline;
}
@media only screen and (max-width: 600px) {
header {
flex-direction: column;
text-align: center;
}
nav {
margin-top: 10px;
}
nav ul {
flex-direction: column;
text-align: center;
}
nav li {
display: block;
margin: 10px 0;
}
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
position: relative;
margin: 0;
padding: 0;
}
.content {
flex: 1;
}
footer {
background-color: #026773;
color: white;
text-align: center;
padding: 10px;
position: relative;
z-index: 1;
margin-top: auto;
}
footer::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 400px;
background: url(imgs/layered-peaks-haikei.svg) repeat-x;
z-index: 2;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.skip-link {
position: fixed;
top: 0;
left: 0;
background: #fff;
padding: 10px;
z-index: 999;
}
.typewriter {
overflow: hidden;
max-width: 800px;
margin: 0 auto;
}
.typewriter-bar {
border-right: 1px solid #222;
} <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300&family=Poppins:ital,wght@0,600;1,600&family=Signika:wght@300;400&display=swap"
rel="stylesheet"
/>
<div class="skip-link">
<a class="visually-hidden" href="#main-content">Skip to Main Content</a>
</div>
<header>
<h2>Name</h2>
<nav>
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">Selected Work</a></li>
<li><a href="#">Resume</a></li>
</ul>
</nav>
</header>
<main id="main-content" class="container">
<div class="content">
<div class="typewriter-container">
<h1>
I'm a <span class="typewriter"></span
><span class="typewriter-bar"></span>
</h1>
</div>
<h2>Hi there!</h2>
</div>
</main>
<footer></footer>
To address this issue, I have attempted enclosing the typewriter section within its own container/div and setting a specific width for it. However, subsequent containers still respond to the resizing caused by the typewriter effect.