I am trying to create a typewriter effect of 4 Random Strings which need to variate on page load. I got everything working, but i am having troubles with the typewriter effect. I tried several methods like: Typed.js, typewriter, but nothing seems to work. I guess the 'steps' option in CSS animation doesn't work as well, since the will excist of several random strings, so the characters variate.
I hope there is someone who can help me out on this. Much appreciated!
<body>
<div class="loader">
<div class="loader-content">
<div class="loader-overlay"></div>
<img class="loader-img" src="http://test.citralstudios.com/wp-content/uploads/2023/07/logo-wit-web.png" alt="Citral Studios logo">
<div class="loader-random-quote" id="element"></div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"></script>
</body>
.loader {
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.loader-content{
height: 100%;
width: 100%;
position: relative;
}
.loader-overlay{
width: 100vw;
height: 100vh;
z-index: 50;
position: absolute;
left: 0;
top: 0;
background: var(--black);
transition: opacity 0.5s, visibility 0.5s ease;
transition-delay: 2s;
}
.loader-content img{
position: absolute;
top: 50%;
left: 50%;
z-index: 55;
transform: translate(-50%, -50%);
width: 15%;
height: auto;
transition: opacity 0.5s, visibility 0.5s ease;
transition-delay: 1.5s;
}
.loader-random-quote {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 55;
font-family: "degular-text", sans-serif;
font-weight: 700;
font-style: normal;
line-height: 1.3em;
font-size: 2em;
color: var(--white);
transition: opacity 0.5s, visibility 0.5s ease;
transition-delay: 1.2s;
}
.loader--hidden {
opacity: 0;
visibility: hidden;
}
$(document).ready(function () {
var quotes = new Array("Loading sweet video's...", "Loading... One pixel at a time...", "Lights, camera, action...", "Framing imagination, crafting reality..."),
randno = quotes[Math.floor(Math.random() * quotes.length)];
$('.loader-random-quote').append('<p id="demo"> ' + randno + '</p>');
var i = 0;
var txt = quotes;
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("element").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
});
window.addEventListener("load", () => {
const loader = document.querySelector(".loader");
const loaderOverlay = document.querySelector(".loader-overlay");
const loaderImage = document.querySelector(".loader-img");
const RandomText = document.querySelector(".loader-random-quote");
loaderOverlay.classList.add("loader--hidden");
loaderImage.classList.add("loader--hidden");
RandomText.classList.add("loader--hidden");
loader.addEventListener("transitionend", () => {
document.body.removeChild(loader);
});
});
Got it working, to adjust the javascript in this code: