<div class="content">
<h1 class="typedtext"></h1>
<h4>Typping animation I developed for <a href="https://myplace.ramonmorcillo.com/contact.html" target="_blank">my contact page </a> </h4>
</div>
<script src="https://cdn.jsdelivr.net/gh/reymon359/web-experiments/Social%20Signature/socialsignature.min.js" crossorigin="anonymous"></script>
* {
font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif, Arial;
}
.content {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.typedtext {
margin-top: 20%;
border-right: 2px solid black;
animation: blinkTextCursor 800ms steps(44) infinite normal;
height: 40px;
margin-bottom: 55px;
color: #000;
display: block;
}
@keyframes blinkTextCursor {
from {
border-right-color: black;
}
to {
border-right-color: transparent;
}
}
/*
* typingEffect()
* It types an array of texts in a random order. I like random stuffπ
*/
function typingEffect() {
const contactTexts = shuffleArray(['Want to tell me something?π', 'Ask me anything!π', 'Want to talk about an idea?', 'Lets do something together!π€', 'Do you need help in something?π']);
const typedtext = document.getElementsByClassName("typedtext")[0];
let removing = false;
let idx = char = 0;
setInterval(() => { // We define the interval of the typing speed
// If we do not reach the limit, we insert characters in the html
if (char < contactTexts[idx].length) typedtext.innerHTML += contactTexts[idx][char];
// 15*150ms = time before starting to remove characters
if (char == contactTexts[idx].length + 15) removing = true;
// Removing characters, the last one always
if (removing) typedtext.innerHTML = typedtext.innerHTML.substring(0, typedtext.innerHTML.length - 1);
char++; // Next character
// When there is nothing else to remove
if (typedtext.innerHTML.length === 0) {
// If we get to the end of the texts we start over
if (idx === contactTexts.length - 1) idx = 0
else idx++;
char = 0; // Start the next text by the first character
removing = false; // No more removing characters
}
}, 150); // Typing speed, 150 ms
}
typingEffect();
function shuffleArray(array) {
let currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.