Pure JavaScript Type Writer Effect




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


45 responses to “Pure JavaScript Type Writer Effect”

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

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

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

Leave a Reply