In this project we will create a little website with a type writer effect using pure vanilla JavaScript. We will also do some CSS (Flexbox, etc)
Sponsor: DevMountain Bootcamp
https://goo.gl/6q0dEa
Carlos Mafla Dev Channel:
https://www.youtube.com/channel/UCnFRgYETwUg6eoeHACuVkcA
💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia
Code:
Pexels Image:
https://www.pexels.com/photo/city-lit-up-at-night-316902/
Website & Udemy Courses
http://www.traversymedia.com
Follow Traversy Media:
https://www.facebook.com/traversymedia
Tweets by traversymedia
https://www.instagram.com/traversymedia
Original source
45 responses to “Pure JavaScript Type Writer Effect”
If you don’t want to do the html and css skip to around 12 mins. I like to do everything start to finish. Feel free to skip around
I really like that effect. Great tutorial!
Please do more vids like this, where we have to think a little hard on the logic part 😀
learn and become a web developer here on rootechcontrol.com
DEAR BRAD, CAN YOU CREATE VIDEOS ON RBAC (ROLE BASED ACCESS CONTROL) SYSTEM IN ANY ONE OF PHP FRAMEWORK
Don't understand the modulus bit. Can someone please explain?
Thanks so much, Traversy! I have been looking for a tutorial for this effect for months now seen I saw it on a website
You a GOAT to self-taught web development.
Keep to make gr8 dude 👏
What kind of editor u use? Answer please..
it was amazing. thank you. i learned DOM, but still have questions in here, i am sure i wouldn't be able to create this on my own, need more practicing!
Fantastic stuff. I had an implementation of this but your implementation was more simple and much shorter.
You are my master .. thanks lot for u r awesome web development videos…
awesome tutorial
Thanks for another super cool and fun project! Short, sweet and well-explained.
Thank you Brad! Very simple but gets the job done! I've made some customization like Typing speed, Loop and Blinking cursor. Please give me your thoughts 🙂
https://github.com/awran5/typewriting/
I love watching your videos but whats your beef with jquery its probably one of the most beneficial libraries in javascript hands down.
really love the AJAX Crash course video. You demystified AJAX for me. Thanks alot Mr. Brad Traversy….
TRAVERSY RULES!
Great tutorial, Brad!
Isn't using .innerHTML bad? It opens possible security and performance issues.
Hi Brad,
My cursor goes one extra character space to the left and doesn't stop deleting at the last character like yours.
I've checked out your code on CodePen and still can't figure out why. Any ideas?
Nice video. Very well explained
i swear google is tracking my mind
Brad, thanks so much for the shout out, I really appreciate it!. I came back from vacation and saw all the notifications.
Hi Brad, so, will you migrate to Mac OS Mojave?
Hey Brad can you make a tutorial on twig or smarty template engine
I get an error on `document.addEventListener("DOMContentLoader", init); On the console init is not definied and when I run on node the main.js file document is not defiened. Can someone help??
xD I love Devtips too,they were hilarious
If you want your cursor to blink add the following:
.txt-type .txt {
border-right: 0.2rem solid #777;
padding-right: 2px;
animation: cursorBlink 0.5s step-end infinite alternate;
}
@keyframes cursorBlink {
50% {
border-color: transparent;
}
}
Traversy Media is awesome. You're a blessing.
13:61. Can someone explain me what this. means? Where does this.txtelement = txtelement refers to? Is this just a way of adding properties? Dont get it
Which is the video he metion in 7:40 about some guys trying to center something in css?
@7:15 thanks for the tip
Great stuff!!
Thank you very much Brad!
Can you explain why you add another <span> inside the txtElement <span>? I don't see why you can't just put the cursor on the txtElement.
Great video Brad! I genuinely appreciate your instruction style.
Awesome Stuff
This was fun! I'm only playing around in JS and not nearly a pro developer using JS but this was really easy to follow and was even able to use the same concept in a count down timer. Thank you very much!
Hey Brad. Super cool video. Just have 1 question: can you please explain what that 'modulus' operator does on that line?
const current = this.wordIndex % this.words.length
How can a person know so many things?. Sounds unbelievable.. I think you are The best teacher on YouTube for web development. I would love to get a tutorial on how to convert a psd to HTML because that is missing on your channel.. Once again love all your videos.. Please reply to this. 👍❤️
Wow! Super cool
Who Loves Traversy Media's All Tutorials?
Like Here
👇
👇
I wanted TypeWriting effect on my Portfolio Website and you made one. You're the Best!!
Brad Traversy the GOD