How to Easily Create a Text Typewriter Effect with JavaScript
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- In today's video I'll show you how to create a "text typing" effect in JavaScript - in other words, how to make text appear as if it's being "typed" by a human as it's rendered on the page 😎
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript
this is a very easy and good way of doing a typewriter effect, good job and thanks!
Simple and effective 😀 Thank you!
I'm curious, is there is an advantage to doing this recursively vs. iteratively?
amazing thank you so much. how can i make it repeat alone ?
Did you notice the bug at the end where there's invalid unicode put to the screen for a second until the full unicode character has been output? Making it work smoothly with unicode would be an interesting video.
Thanks brother, may god bless you
thank you bro
how can add this to a project of mine? i´m trying but it´s not working
Love your tutorials, you should do more advanced front-end stuff
thank you so much bro
Awesome! That's a cool trick to create a text-typing effect. Thanks for sharing. How to add a cursor at the end and after text typing is completed that cursor should blink.
.text{
overflow: hidden;
border-right: .05em solid orange;
white-space: nowrap;
animation:
blink-caret .75s step-end infinite;
}
@keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: orange;
}
}
where can I get 'Lexend' font? Is that a Google Font?
Cute. What if I want this effect to loop endlessly?
Just add typeTypeEffect(element,text) in if(text ===length-1)
Thanks!
You're welcome! Thank you for the Super Thanks 💪 appreciate it
Nice!!🌹👌👍🙏🖖🖖🖖
Doesn't work for me >.>
i use opera gx. every time i type in there, there is this clacking sound. i like it. how to do that with js?
Add a keyboard event listener and have it trigger a sound. Tone.js is a good library to play sounds with javascript.
dope
Please how can I make the text infinitely repeat