I've been experimenting with adding a typing animation to my current HTML document as part of a project I'm working on. Despite following tutorials and guides, the animation is successful when created in separate HTML/CSS documents, but integrating it into my existing project has proven to be challenging.
For this project, I utilized a GitHub repository: https://github.com/mattboldt/typed.js/
To incorporate the typing animation, I cloned the necessary files into a designated folder within my project structure. The location for the file ended up being .\javascript\typed.js
<div id="header">
<div class="container">
<nav>
<img src="images/logo.png" class="logo" alt="">
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fa-solid fa-xmark" onclick="closemenu()"></i>
</ul>
<i class="fa-sharp fa-solid fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text-style">
<p>im a<span id="animate"></span>
</p>
<h1>Hi, i'm <span>Elf</span><br> from the North Pole</h1>
</div>
</div>
</div>
Insert at the bottom, within the body section:
<script src="javascript/typed.js"></script>
<script>
var typed = new Typed('.animate', {
strings: ["Coding", "Sleeping", "third word"],
typeSpeed: 150,
backSpeed: 150,
loop: true
})
</script>
.header-text-style p{
position: absolute;
top: 27%;
left: 100%;
transform: translate(-50%, -50%);
width: 100%;
margin: 0;
padding: 0;
font-family: poppins;
color: green;
font-size: 4.5em;
text-shadow: 0 2px 5px rgba(#fff , .5);
}
#animate{
color: chartreuse;
}