• Saturday , 15 December 2018

Pure JavaScript Type Writer Effect

Code Canyon



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

https://www.instagram.com/traversymedia

Original source

3d Ocean

Related Posts

45 Comments

  1. Traversy Media
    October 13, 2018 at 22:33

    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

  2. Rick D
    October 13, 2018 at 22:33

    I really like that effect. Great tutorial!

  3. Aamir
    October 13, 2018 at 22:33

    Please do more vids like this, where we have to think a little hard on the logic part 😀

  4. Kisibo Nestor
    October 13, 2018 at 22:33

    learn and become a web developer here on rootechcontrol.com

  5. Vijayan Ramalingam
    October 13, 2018 at 22:33

    DEAR BRAD, CAN YOU CREATE VIDEOS ON RBAC (ROLE BASED ACCESS CONTROL) SYSTEM IN ANY ONE OF PHP FRAMEWORK

  6. Daniel Luke
    October 13, 2018 at 22:33

    Don't understand the modulus bit. Can someone please explain?

  7. Uche Duk
    October 13, 2018 at 22:33

    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.

  8. Mustafa ÇAPAN
    October 13, 2018 at 22:33

    Keep to make gr8 dude 👏

  9. Feri tkj2
    October 13, 2018 at 22:33

    What kind of editor u use? Answer please..

  10. Chananel Laufer
    October 13, 2018 at 22:33

    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!

  11. Eugene Vedensky
    October 13, 2018 at 22:33

    Fantastic stuff. I had an implementation of this but your implementation was more simple and much shorter.

  12. dasscrazy
    October 13, 2018 at 22:33

    You are my master .. thanks lot for u r awesome web development videos…

  13. Vishnu M
    October 13, 2018 at 22:33

    awesome tutorial

  14. Lynne
    October 13, 2018 at 22:33

    Thanks for another super cool and fun project! Short, sweet and well-explained.

  15. awran5
    October 13, 2018 at 22:33

    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/

  16. James Mitchell
    October 13, 2018 at 22:33

    I love watching your videos but whats your beef with jquery its probably one of the most beneficial libraries in javascript hands down.

  17. daniel michael
    October 13, 2018 at 22:33

    really love the AJAX Crash course video. You demystified AJAX for me. Thanks alot Mr. Brad Traversy….

  18. petrus miguel
    October 13, 2018 at 22:33

    TRAVERSY RULES!

  19. Huy Hoang
    October 13, 2018 at 22:33

    Great tutorial, Brad!

  20. James W
    October 13, 2018 at 22:33

    Isn't using .innerHTML bad? It opens possible security and performance issues.

  21. Blue Herring
    October 13, 2018 at 22:33

    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?

  22. Hristina Lazarova
    October 13, 2018 at 22:33

    Nice video. Very well explained

  23. ShutDown__Mate
    October 13, 2018 at 22:33

    i swear google is tracking my mind

  24. Carlos Mafla
    October 13, 2018 at 22:33

    Brad, thanks so much for the shout out, I really appreciate it!. I came back from vacation and saw all the notifications.

  25. Ilya Zhidkov
    October 13, 2018 at 22:33

    Hi Brad, so, will you migrate to Mac OS Mojave?

  26. Ajit Sahu
    October 13, 2018 at 22:33

    Hey Brad can you make a tutorial on twig or smarty template engine

  27. Dimitris Efstathiadis
    October 13, 2018 at 22:33

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

  28. Jacob Nandi
    October 13, 2018 at 22:33

    xD I love Devtips too,they were hilarious

  29. idlevandal69
    October 13, 2018 at 22:33

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

  30. Marosi Máté
    October 13, 2018 at 22:33

    Traversy Media is awesome. You're a blessing.

  31. Fakametjou
    October 13, 2018 at 22:33

    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

  32. RonaldFelix
    October 13, 2018 at 22:33

    Which is the video he metion in 7:40 about some guys trying to center something in css?

  33. taariqq
    October 13, 2018 at 22:33

    @7:15 thanks for the tip

  34. richiexp2
    October 13, 2018 at 22:33

    Great stuff!!

  35. MPP3RClnx
    October 13, 2018 at 22:33

    Thank you very much Brad!

  36. Adrian Borup
    October 13, 2018 at 22:33

    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.

  37. jeff stamey
    October 13, 2018 at 22:33

    Great video Brad! I genuinely appreciate your instruction style.

  38. Sam Finance Concepts
    October 13, 2018 at 22:33

    Awesome Stuff

  39. Christo Lombard
    October 13, 2018 at 22:33

    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!

  40. Mantvydas Binderis
    October 13, 2018 at 22:33

    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

  41. Malik Bagwala
    October 13, 2018 at 22:33

    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. 👍❤️

  42. Ita Co
    October 13, 2018 at 22:33

    Wow! Super cool

  43. Anish Web
    October 13, 2018 at 22:33

    Who Loves Traversy Media's All Tutorials?
    Like Here
    👇
    👇

  44. Dheeraj Kn
    October 13, 2018 at 22:33

    I wanted TypeWriting effect on my Portfolio Website and you made one. You're the Best!!

  45. Ash Klmepton
    October 13, 2018 at 22:33

    Brad Traversy the GOD

Leave A Comment

You must be logged in to post a comment.