Jinsi ya Kutengeneza Text Typing Animation kwa JS
Jifunze jinsi ya kuunda text typing animation inayofanana na maandiko yanayoandikwa moja baada ya nyingine kwenye screen. Animation hii inafanya website yako ionekane interactive na dynamic, na inaweza kutumika kwa headings, intros, au hero sections.
Mfano wa Code (Simple JS Typing Effect):
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Typing Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
color: #fff;
font-family: 'Courier New', Courier, monospace;
font-size: 2rem;
}
.cursor {
display: inline-block;
width: 2px;
background-color: #fff;
margin-left: 2px;
animation: blink 0.7s infinite;
}
@keyframes blink {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
</style>
</head>
<body>
<div id="text"></div><div class="cursor"></div>
<script>
const message = "Jifunze JavaScript Text Typing Animation!";
const textElement = document.getElementById("text");
let index = 0;
function type() {
if (index < message.length) {
textElement.innerHTML += message.charAt(index);
index++;
setTimeout(type, 100); // Adjust typing speed here (ms)
}
}
type();
</script>
</body>
</html>
Maelezo ya Code:
textElement.innerHTML += message.charAt(index); inaongeza character moja baada ya nyingine.
setTimeout(type, 100); inadhibiti speed ya typing (100ms kwa kila character).
.cursor na @keyframes blink inaunda blinking cursor effect kama typing editor.
Unaweza kubadilisha message, font, na speed ili ifanye website yako kuwa interactive zaidi.
🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/
📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php
📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509
🚀 Unahitaji mfumo au website ya biashara?
Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.