DevCode Journey👉
A minimal and visually appealing typing animation that loops through multiple phrases seamlessly. Ideal for modern websites to emphasize ideas, slogans, or headlines in a dynamic and engaging way. Built using clean HTML, CSS, and JavaScript—this effect is lightweight, responsive, and fully customizable to suit any design style
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevCode Journey auto slider</title>
<style>
.section {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Segoe UI', sans-serif;
}
.typewriter-wrapper {
font-family: 'Segoe UI', sans-serif;
font-size: 2em;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid red;
width: fit-content;
animation: blink-caret 0.75s step-end infinite;
display: flex;
gap: 5px;
background: white;
padding: 10px 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: orange; }
}
.typewriter {
color: orange;
}
</style>
</head>
<body>
<div class="section">
<div class="typewriter-wrapper">
<span> DevCode Journey👉 </span>
<span class="typewriter" id="changing-text"></span>
</div>
</div>
<script>
const texts = [
" YouTube ",
" WhatsApp ",
" Instagram ",
" FaceBook ",
" LinkedIn ",
" Threads ",
];
let count = 0;
let index = 0;
let currentText = '';
let letter = '';
let isDeleting = false;
const speed = 100;
const pause = 1000;
function type() {
if (count === texts.length) count = 0;
currentText = texts[count];
if (isDeleting) {
letter = currentText.substring(0, index--);
} else {
letter = currentText.substring(0, index++);
}
document.getElementById('changing-text').textContent = letter;
if (!isDeleting && index === currentText.length) {
isDeleting = true;
setTimeout(type, pause);
} else if (isDeleting && index === 0) {
isDeleting = false;
count++;
setTimeout(type, 300);
} else {
setTimeout(type, speed);
}
}
type();
</script>
</body>
</html>
