xxxxxxxxxx
// ----------variable declaration
let i = 0;
// you can add other text in array
const texts = ['textOne', 'textTwo', 'textThree'];
let textIndex = 0;
const speed = 150;
//5s interval duration
const duration = 5000;
//-------------------
// function animation
const textAnim = id => {
const element = document.getElementById(id);
element.innerHTML += texts[textIndex].charAt(i);
i++;
if (i > texts[textIndex].length) {
textIndex = (textIndex + 1) % texts.length;
i = 0;
setTimeout(() => {
element.innerHTML = '';
textAnim(id);
}, duration);
} else {
setTimeout(() => textAnim(id), speed);
}
};
// element animation
textAnim("mySpan");
//------------------------------------------------------------------------------
// in html document i have this
<html>
<h1>
this text is animating :
<span id="mySpan"><!-- write nothing here --></span>
</h1>
</html>
//-----------------------------------------------------------------------------
//caret animation in css
<style>
#mySpan{
display: inline-block;
animation: title 1s 0s infinite ease-in-out;
}
@keyframes title {
0%,50% {
border-right: solid 3px black;
}
50%,100% {
border: none;
}
}
</style>
xxxxxxxxxx
// typing animation in js:
//copy the following code:
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
const applyTypingAnimation = async (element, delay) => {
const stringToWrite= element.innerText;
element.innerHTML= "";
let refill= "";
const cursorHTML= "▮";
for (character of stringToWrite) {
refill+= character;
await sleep(delay)
element.innerHTML= refill+cursorHTML;
}
}
// calling the function:
applyTipingAnimation(/*your element*/, /*your delay*/)
xxxxxxxxxx
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(500)
.typeString('Websites')
.pauseFor(500)
.deleteChars(9)
.pauseFor(500)
.typeString('Messenger')
.pauseFor(500)
.deleteChars(9)
.pauseFor(500)
.typeString('Instagram')
.pauseFor(500)
.deleteChars(9)
.pauseFor(500)
.typeString('Whats App')
.pauseFor(500)
.deleteChars(9)
.pauseFor(1000)
.start();