Interesting Text Typing Effect With Country Details From the Given Code
HTML Code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> Typing Text Effect</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<p>Country & Capital :- <span class="typed-text"></span><span class="cursor"> </span></p>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Geometr415 Blk BT';
background : url(https://c1.wallpaperflare.com/preview/504/746/522/art-drawing-paper-sketching.jpg);
color: #0000ff;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container p {
font-size: 3rem;
padding: 0.5rem;
font-weight: bold;
letter-spacing: 0.1rem;
text-align: center;
overflow: hidden;
}
.container p span.typed-text {
font-weight: normal;
color: #ff0000;
}
.container p span.cursor {
display: inline-block;
background-color: #ccc;
margin-left: 0.1rem;
width: 3px;
animation: blink 1.5s infinite;
}
.container p span.cursor.typing {
animation: none;
}
@keyframes blink {
0% { background-color: #ccc; }
49% { background-color: #ccc; }
50% { background-color: transparent; }
99% { background-color: transparent; }
100% { background-color: #ccc; }
}
JavaScript Code
const typedTextSpan = document.querySelector(".typed-text");
const cursorSpan = document.querySelector(".cursor");
const textArray = ["India", "New Delhi", "USA", "Washington, D.C.","UK","London","China","Beijing","Pakistan","Islamabad","Russia","Moscow","Japan","Tokyo","France","Paris","Italy","Rome","Germany","Berlin","South Africa","Cape Town","Australia","Canberra","Bangladesh","Dhaka","Canada","Ottawa","Nepal","Kathmandu","New Zealand","Wellington","Norway","Oslo","Saudi Arabia","Riyadh","Singapore","Singapore","Sri Lanka","Colombo","Sweden","Stockholm","United Arab Emirates","Abu Dhabi","Switzerland","Bern","Spain","Madrid","Philippines","Manila","Mexico","Mexico City","Kenya","Nairobi","Indonesia","Jakarta"];
const typingDelay = 200;
const erasingDelay = 100;
const newTextDelay = 1000;
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if (charIndex < textArray[textArrayIndex].length) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
cursorSpan.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if (charIndex > 0) {
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
charIndex--;
setTimeout(erase, erasingDelay);
}
else {
cursorSpan.classList.remove("typing");
textArrayIndex++;
if(textArrayIndex>=textArray.length) textArrayIndex=0;
setTimeout(type, typingDelay + 1100);
}
}
document.addEventListener("DOMContentLoaded", function() {
if(textArray.length) setTimeout(type, newTextDelay + 250);
});
Screen Output
Posts
33 Comments
Wow wonderful post
ReplyDeleteAwesome & Perfect
ReplyDeleteAmazing & Brilliant
ReplyDeleteFantastic & Perfect
ReplyDeleteSuperb Class
ReplyDeleteSuper cool 😎
ReplyDeletebrilliant
ReplyDeleteinteresting work done
ReplyDeleteoutstanding
ReplyDeleteAwesome and amazing
ReplyDeletebrilliant idea
ReplyDeleteperfect 👌
ReplyDeletewonderful
ReplyDeleteawesome
ReplyDeletemind blowing
ReplyDeleteperfect 👌
ReplyDeleteexcellent
ReplyDeleteamazing
ReplyDeleteawesome
ReplyDeleteSuper
ReplyDeleteexcellent
ReplyDeleteexcellent
ReplyDeletesuper nice
ReplyDeleteexcellent
ReplyDeletebrilliant idea
ReplyDeleteexcellent
ReplyDeleteawesome
ReplyDeleteperfect
ReplyDeletebrilliant idea
ReplyDeleteawesome
ReplyDeletegreat
ReplyDeleteamazing
ReplyDeleteExcellent
ReplyDelete