Typing Effect with HTML, CSS and JavaScript
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Learn how to create a Typing Effect with HTML, CSS and vanilla JavaScript.
The typing effect is simple to implement and can be used to convey important messages to the users.
Creating the typing animation from scratch, will allow you to modify it any way you want, according to your needs and imagination!
Table of Contents:
00:00 - Intro
00:25 - HTML
03:03 - CSS
11:07 - JavaScript
Code for this Project: codepen.io/Coding_Journey/pen...
Support the Channel 💙☕🙏
PayPal: paypal.me/CodingJourney
Suggested Videos:
Back to Top Button with HTML, CSS and JavaScript: • Back to Top Button wit...
Card Flip Effect (HTML & CSS): • Card Flip Effect (HTML...
Arrow Swipe Game with HTML, CSS and JavaScript: • Arrow Swipe Game with ...
Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!
Codepen: codepen.io/Coding_Journey/
Twitter: / codingjrney
Email: codingjourney123@gmail.com
Subscribe 💖
/ @codingjourney
I use ABC rule
A -- Always
B -- Be
C -- Coding
Heheh! Absolutely love it 😉👍💙
Excellent mate! Doing great, keep it up!!!
Beautiful! Thank you Sir!!
Amazing tutorial. Very clean and love the detailing. Thank you for sharing.
Oh thank you 🙂 My pleasure, very glad you liked it!!
I loved it! Thanks for this tutorial! Keep up your good work!
Oh thank you! Very glad you liked it 🙂 You too 😉
Great tutorial as always! Keep it up, man! Thanks!
Oh thank you for the lovely comment and encouragement 😉 My pleasure 🙂 You too!!
Amazing explanation, clearer than water, first time I had no error in a CSs/JS excersice, thank you a lot bro. Greetings from Mexico.
Oh thank you for the lovely comment 🙂 My pleasure!! Warm greetings to Mexico 💙
I cannot stress enough how much this tutorial,has helped,thank you so much to Coding journey!!
Thank you for this amazing comment 🙂 Very happy to hear that this was helpful! All the best, keep coding 😉
this tutorial was the best of all the internet because other youtubers videos were complicated and hard to understand but you made it so simple that any one could understand.
Oh thank you for the lovely comment! I certainly did my best 🙂 Glad you liked it 💙💙
Awesome video! Very helpful. Thanks!
My pleasure 🙂 Very glad you liked it! 💙
Love it!!
thank you. idk js and from this video bc of the explanation i learned a little and understood how the script works. tysm!
Amazing! Totally my pleasure 🙂💙
Thanks I tried hundred other tutorials but this was the only one working👍🏻
Oh thank you!! Very glad you found this useful 🙂 All the best, keep coding 😉💙
same!!
Thank you so much! You explain very well. New subscriber!
Ooooh thank you for the nice words 🙂 Very glad you liked it! Welcome aboard 😉🙂
awesome! pretty and works nicely. i really appreciated!!
Oh thank you 🙂 Very glad you liked it!!
Very Use full
You sir, did an amazing job here. Much appreciated. All my attempts at this were not as clean as this
Thanks for the lovely comment man! Very happy to hear you found this useful 🙂
i realize I'm kinda randomly asking but do anyone know of a good website to watch newly released movies online ?
@Angelo Griffin i watch on flixzone. Just search on google for it :)
Thank u sir this helps a lot bless you
Coding is Superpower💪 Thank's sir for great tutorial
Yes it is 😉 My pleasure, glad you liked it!! 💙
Best typewriter effect tutorial on youtube
Ooooh thank youuuu 🙂😉 Love your Polly cover! The Nirvana Unplugged album was one of my favorites...spent hundreds of hours listening to it 😁 Keep it up, all the best!!
Thank you so much bro!!!*
Awesome!
Oh thank you 🍻💙
WOW!!!!!!!!! it's So much helpful .
Amazing!! Glad it was helpful 🙂
This is the second time i have come across this channel and it is so underrated. I don't understand how he doesn't have more followers.
Oh thanks mate!! 🙂 No need for frustration, it is what it is 😉💙
Waaao! It's So great bro, perfect
Oh thanks man 🙂 Very glad you liked it!
It was very usefull and well explained. Thanks a lot
Oh thank you 😊 Very glad you liked it!!
Very nice. Thank you!
Glad you liked it man! Thanks for the support!!
Thank you so much sir
your way of explanation is amazing... thanks sir
Oh thank you 🙂 Totally my pleasure 🙂💙
very nice ... & I will see this amazing tutorial later ...
Excellent man! Appreciate the support!! Keep coding 😉🙂
Superb lesson man! Thanks for this, very easy to understand! Most videos here in youtube are only the code without explanations.
Oh thank you for the nice words! 🙏🙂 Very glad you found this useful! Keep coding!! 😉
It was very much helpful and thanks for explaining in detail.
My pleasure 🙂 Very glad it was helpful!!
whoooooa! thanks
Thanks
Awesome man
Thaaaanks 🙂 Glad you liked it!!
Amazing bro , very good explanation and useful as well, but unfortunately I am still beginner and I cant understand it completly, plz can u post more of this ? , anyway 10x again bro .
Excelente muchas gracias men
Thanks man! Glad you liked it!!
you are amazing teacher my friend. Thank you so much
Oh thank you for the nice words 🙂🙏 Very glad you liked this!
useful!!! Thanks
Thank you!! Very glad you liked it!
Love you bro.
💙💙💙🙂
Thank you so much bro ❤️❤️❤️❤️❤️❤️
Totally my pleasure bro 🙂💙💙
Thanks bro :)
My pleasure 🙂💙
thanks
codeing is LIFE
👍💙💙🙂
Thanks ❤
You're welcome 😊 Glad you liked it!! 💙
perfect
🙏🙂
nice logic sir
Oh thank you! 🙂 Very glad to hear that 😉
thanks bro
Amazing, thank you so much
Pleasure is all mine 🙂 Very glad you liked it!!
@@CodingJourney I just needed this functionality in a website. This will help me a lot. Thanks again, keep up the good work. you are doing great
Thanks man! You too, all the best!!!
Thank you very much!
My pleasure 🙂 Very glad you liked it!!
@@CodingJourney I have a question, do you know how to increase the typing and the erasing speed? I've been trying to change the "typingDelay" and "erasingDelay", but nothing happened. Any advice?
Thanks in advance :)
Hey 🙂 Changing "typingDelay" and "erasingDelay" should do the job! You can also find a link to this project in the description in case you want to compare with your code! Good luck, keep coding 😉
OMMMMMMMMGGGGGGGGGGGGGGGGG IT WORKED
😁💙
Hi Coding journey
How can i add html tag like into the array element for this typing effect using javascript.
Ex "hard"
Could you please help me about the above things.
Thanks in advanced
How do i implement this into Wix Editor X? Iframe is not showing on Editor X's add menu.. Do I use the Home Page Code field?
Can you make a video for . Another typing effect ( use only CSS) bcoz understanding JS is difficult and complex sometime
i tried a lot of times even checked every bit but its after erasing some char speed become like superfast..... why this?
Hey CJ. Thanks for this tutorial, very helpful. I have a request. I have a landing page that will use this typing effect but I am struggling with a JavaScript code to swap images based on the TextArrayList index selected. Can you help out?
Hey mate! My suggestion would be to keep trying until you make it work...that's the best way to learn...and feels great as well 🙂 But if you've reached high levels of frustration, feel free to create a CodePen with the specific part you are trying to do or GitHub or email me the project and I'll have a look!
Thank you so much sir! But will it be possible to rewrite the code without using 'recursion'? Don't understand how it's working "under the hood" .
Hey! Glad you liked it 🙂 Well there are always many ways to achieve something. The solution I present here makes more sense to me, feel free to come up with your own solution! However, I think if you take some time to think about it, everything will soon make more sense...it's not rocket science 😉 All the best, keep coding!!
Hello Sir, first of all thanks for this! I need a little help tho.. I was trying to implement your code to my file with other codes and I got an error that says : Cannot read property ‘classList’ of null at type(index line blablablabla) . I went to code pen and stack overflow.. but umh not sure what to do here..?
Hello! Well usually it is very difficult (if not impossible) to debug code without looking at it 🙂 But the error you are getting suggests that you are trying to access an element which does not exist. In this project we set:
const cursorSpan = document.querySelector(".cursor");
So you have to make sure that in the HTML file you do have an element with the class "cursor" ().
You can also find a link to the project in the description, in case you want to have a closer look! All the best, keep coding!!
Hey man, i had an issue. When i call type in the setTimeout(type, typingDelay) .. it doesnt work. any idea?
Hey, what's up man! I can't debug without looking at your code, but in the description you can find a link to the finished project and compare with your code, so combined with the video explanation I think you won't have a hard time figuring it out! All the best, keep coding 💙🙂
Can you please explain why you're not using curly brackets on the if statements inside your else statement. I have searched around and I can not wrap my head around why the code does not work if you do have curly brackets. Thank you.
Hey! Thanks for the lovely comments 🙂 We can omit the curly brackets for an "if" statement, when there is only one statement to be executed. However, this is optional! Using curly brackets always works (in fact there is a debate whether always using curly brackets should be the best practice...) So, for example, the following should work fine in both cases:
if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
OR
if(!cursorSpan.classList.contains("typing")) { cursorSpan.classList.add("typing"); }
(OR, breaking it into multiple lines)
if(!cursorSpan.classList.contains("typing")) {
cursorSpan.classList.add("typing");
}
Hope this helps! All the best, keep coding!!
@@CodingJourney Thank you!
how do you make a code that erases all after "Coding is LIFE". Then add a new line with all in white color, for example:
() = red
"Coding is (hard)"
"Coding is (fun)"
"Coding is (a journey)"
"Coding is (LIFE)"
*Then delete all*
"Come and join now!"
Which font you are using please 😃 tell for text editor
Hey! Just kept the default VS Code editor settings, I didn't change anything. From what I can see, the default font priority is: Consolas, 'Courier New', monospace. Nice channel btw 😉 Doing good, keep it up!!
@@CodingJourney thankyou so much 😚 to
Typewriter works perfectly fine but it doesn't loop after the end word in my case.
Hey man! There is a link to the project in the description so that you can compare with your code. All the best!!
How would I make it to stop "Coding is LIFE" at the end of the loop?
Hey! In this case you only want to proceed to erasing if the typed word is not the last one in the textArray. So:
function type() {
.
.
.
else {
cursorSpan.classList.remove("typing");
if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay);
}
}
That should do it 🙂 All the best!!
@@CodingJourney you are awesome! thank you
600th like
🙂 600th like and 100th comment 😉 Thank you!! Huge love 💙🙂
cursor is very thick in my web page but not in yours
Hey! You can always adjust the cursor width according to your taste! As you can see, I've set cursor width to 3px. If you find this to be thick, you can set it to less than that! All the best, keep coding 😉💙
What font do you use in your VS Code
I am asking because I too like your font (the font used in the editor) and tutorials. They have helped me a lot.
And please tell me the font you use in your editor (I'm obsessed with fonts)
Hello! I didn't change the default VS Code fontFamily settings, so I suppose it is Consolas. Unless you specify otherwise in settings.json, the default font priority is: Consolas, Courier New, and then monospace.
How can we stop at just coding is life when it is done with all the strings in array
Hey! If I understand correctly you want it to stop repeating the loop once it types the last string in the textArray?! Someone asked the same question so I'm pasting my answer so that you don't have to search through the comments:
In this case you only want to proceed to erasing if the typed word is not the last one in the textArray. So:
function type() {
.
.
.
else {
cursorSpan.classList.remove("typing");
if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay);
}
}
Hope this works for you!! All the best 🙂
it did not work for me
What if I have only one word in the array?
Hey! It still works with only one word. If you only want the word to be typed once, then in the "type" function, you can change the "else" content to:
cursorSpan.classList.remove("typing");
if(textArrayIndex < textArray.length-1) setTimeout(erase, newTextDelay);
basically defining that you only want to proceed to erasing if the typed word is not the last one in the textArray. A bit of an overkill for a single word, but that's how you could go about it without making major changes to the code! All the best, keep coding 💙
@@CodingJourney thnx bro you are a life saver...can I use setInterval instead of settimeout?is it the same?
30000k likes for me ... finally I found this🙌
🙏💙💙🙂
I am having a problem in looping the typewriter effect :(
Take your time and gradually everything will make more sense! There is also a link to this project in the description which might help as well. All the best, keep coding!! 💙
@@CodingJourney I tried copying the code for looping but it did not. I am stuck with debugging and I started the work once again and playing your video once again. This was the most simple tutorial for typewriter effect using javascript :)
Sir it amazing but the type speed is very slow
Hello! Thank you, glad you liked it 🙂 You can control the typing speed by changing the typingDelay variable value (and erasingDelay value correspondingly for erasing speed). All the best!! Keep coding 😉💙
Thank you
Is it possible to move the second text of the array on the second line? Thanks
Thanks ❤
My pleasure :) Glad you liked it!!
Thank you Sir
My pleasure 🙂 Glad you liked it!!
Amazing bro , very good explanation and useful as well, but unfortunately I am still beginner and I cant understand it completly, plz can u post more of this ? , anyway 10x again bro .
Excellent! Glad you liked it 🙂 I will definitely keep uploading! And you will definitely become an awesome developer, if that's what you want 😉 Keep it up!!!