<style>
.typing-effect {
overflow: hidden; /* Hide the full text initially */
border-right: .15em solid orange; /* Blinking cursor effect */
white-space: nowrap; /* Prevent text from wrapping */
margin: 0 auto; /* Center the text */
letter-spacing: .15em; /* Spacing between characters */
width: 0; /* Start with a width of 0 */
animation:
typing 30.5s steps(150, end) forwards, /* Typing animation */
blink-caret 0.5s step-end infinite; /* Blinking cursor animation */
}
/* Keyframes for the typing animation */
@keyframes typing {
from { width: 50 }
to { width: 100% }
}
/* Keyframes for the blinking cursor */
@keyframes blink-caret {
from, to { border-color: transparent }
10% { border-color: orange; }
}
</style>
<html>
<p class="typing-effect">Hello, world! This is a CSS typing effect.</p>
</html>
=======================
Typing with javascript
const element = document.getElementById('sequence');
const fullText = 'IT Solutions Professional Work Ethic';
let index = 0;
function typeText() {
if (index < fullText.length) {
// Use the addition assignment operator (+=) to append the next character
element.innerHTML += fullText[index]; //
index++;
// Schedule the next character to be added after a delay (e.g., 100ms)
setTimeout(typeText, 100);
}
}
// Start the sequence
typeText();
Note: for demo you can check CSS framework https://picocss.com/
No comments:
Post a Comment