How to make the HTML/CSS typing effect.
Wassup my fellow replers. How's it hanging. I have been asked at least 10 times about the typing effect on my website and today I will be showing you guy's how to make it yourself.
@CodingElf66 since you asked :D
Before starting you want to create a new repl with HTML/CSS/JS because it will give you a subdomain. Inside this repl there will be 3 files.
index.html file right after the
<body> tag type the following lines of code :
In this code there are 2
<div> elements. The first one is classed to
main-container and we will set some overall css to it. We have to do this because we can't set them to the second
If you have done everything correct so far then your
index.html file should look something like this, if not just copy paste from here :
Setting up the CSS
Now that we have completed the HTML part of this tutorial we can now move on to the CSS part. (Entire CSS can be seen at the bottom or in the repl below.)
We will first import our font and set some root css for the HTML, body, and
main-container. I don't feel the need to explain each selector one by one so the code is here :
On the first line of code we imported a font called Anonymous Pro, you don't have to use this font, you can add your own font of choice. Simply go to https://fonts.google.com/ and find any font there and add it. If you need help adding your own font let me know in the comments and I will guide you step by step.
In the next 2 parts I have specified the
100%. The second part of code is the styling all the HTML that will affect every element on the page. The next part is the body, here we set the
font-family aswell as the
The last part is the
main-container we made earlier. To this we have once again added the
100% aswell as setting the text
#fff which is hexadecimal for plain white. The next is positioning (see my article on the subject) we use flexbox in this tutorial and. The horizontal alignment set using
justify-content and set to
center, the vertical alignment is set using
align-items and set to
If you made it this far I salute you. Now that we have set the main CSS we need to put CSS for the typewriter effect. (Entire CSS can be seen at the bottom or in the repl below.)
Type this into your your
style.css folder after what we just added :
typewriter-text we have
position: relative; along with a
width of 18 em. We have 2 animations here. One called
typewriter which is the text being typed as a empty element just gets bigger and the
blinkTextCursor which is just flashing.
This is the end of my typewriter text effect tutorial. I hope you learned something and if you need help with it just fork my repl or leave a comment with the link to ur repl.
Keep on coding 🙃