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
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