No joke, great tutorial, was just trying to figure this out last month! 👍 It's great to hear you talk the code out, like "this does this and because this is a this it needs a this". Shows me how to think about it next time!
Yes that is very good, but in case we change the font size then maybe we have to change again the min width, also all letters have no same width unless the font is a mono space font. I think more universal approach would be converting the the space character to the HTML entity using javascript. char = (char === " ") ? " " : char;
I research on w3school and found a short way to write the setInterval code: let char = 0; let timer = setInterval(onTick, 50); function onTick(){ const span = text.querySelectorAll('span') [char];
if (char === splitText.length){ clearInterval(timer) }else{ char++ span.classList.add('fade'); } } I am noob and new to JS but I tried this , it works!
I don't know if you gonna see this comment, i only wanna thank you for teaching me Coding i was blank but with you i have now some knowledge........May God give you more years so we can learn more from the tutor.........Happy New Year ED...
For everyone who's trying to seperate the words from each other: just insert ' ' (without qotation marks) wherever you want the space to be in your html document.
Thanks for that !! What I don't understand is why the spaces were showing for me early in the tutorial, but then they disappeared for the final product. Even in Ed's example at the end, sometimes the spaces are displaying, but then they are gone in the next cut.
Amazingly helpful video! This was well worth 14 minutes; the explanations were brief, but thorough and the main example was easy to follow. Hope to see more from you soon!
Damn i had known html for years but i only typed in the tags and was boring when i first tried using it. Now i got to learn css and javascript. BOOO! 🔥 a vast new world of web development has been opened up for me... Thank you so much for making this kind of videos and please keep it coming (especially would appreciate if its tagged with javascript based content). :D
YES I DID WATCH YOUR COURSE YES I DID BUY YOUR TUTORIAL AND YES IT IS AWESOME. ZHANK you. Happy new year!!!!! We are real tech. Get this thing going my man!
I would like to donate 1000 Likes for this tiny but quite creative project. That's the knowledge in our soul that how we use javaScript in creative way. Thank you Ed.
If for some reason the animation doesn't work, use this line in your code .fade:not(.show) { opacity: 1; } i wish that help someone! pd: Thank for share this knowledge Dev Ed
Its works perfectly for my h2 tag but when i tried for my small paragraph its literally joins with my heading and becomes single line . Me trying to fix it but cant can anyone help?
display inline-block eats up the space we had between the two words. Kept banging my head for 30 mins but later saw it's happening in your case too. Any reason on why this is happening?
Thanks eds but i think we can do it with keyframe animation as well and it would be more simple Create span for each letter and then set positions and into keyframes we can set position top with opacity for our effect.
Hey Ed. I really like your style and videos. But, like, I don't know how skillful you are in JS, because you used *3* different variables in order to get the into an array of chars.... you could literally just do it all on the same variable: const splitedText = document.querySelector('.fancy').textContent.split(''); It may be a little verbose, but it's actually way easier and more efficient. Anyways, I love your videos - looking forward for 2020!! Tomer.
Not sure about your proficiency as well. You need to have your code reusable and readable In this particular example your approach will work, however it’s not really the recommended one.
Tomer Shechner working does not necessarily mean it’s readable and reusable. if(var.toString().len() == 4) { return true;} This will check the Boolean true, it’s working Is it good though ? :)
Happy new year my gorgeous teacher on the internet
Hello im from 2021
No joke, great tutorial, was just trying to figure this out last month! 👍 It's great to hear you talk the code out, like "this does this and because this is a this it needs a this". Shows me how to think about it next time!
Thanks For Your Support and Education...We Really Appreciate a Teacher like You.. Happy New Year
Hi Ed! This is simply amazing. The way you create these front-end lessons with a practical approach is really inspiring. Keep sharing, my friend!
You've killed it in 2019, see you in 2020! Happy New Year man!
Time Flies we are close end of 2020.
6:09 - Since splitText is an array, you can also use splitText.forEach((letter, index) => { // some actions });
I was thinking about that too. How would that look with the "forEach()"?
Good tutorial Ed, at 11:40 adding display: inline-block; removes the space between two word.
I came up with a quick fix of using min-width on inline-block'ed span.
Yes that is very good, but in case we change the font size then maybe we have to change again the min width, also all letters have no same width unless the font is a mono space font.
I think more universal approach would be converting the the space character to the HTML entity using javascript.
char = (char === " ") ? " " : char;
Fix =>
if (textSplitted[i] === " ") {
text.innerHTML += "" + " " + "";
continue;
}
@@Nimgimli ops, didn't see yours
@@Nimgimli Thanks, it works !
I research on w3school and found a short way to write the setInterval code:
let char = 0;
let timer = setInterval(onTick, 50);
function onTick(){
const span = text.querySelectorAll('span') [char];
if (char === splitText.length){
clearInterval(timer)
}else{
char++
span.classList.add('fade');
}
}
I am noob and new to JS but I tried this , it works!
thaaaaaaanks !!!!! you great !
When it comes to your videos, I usually click the "like" button first before watching. :D
I don't know if you gonna see this comment, i only wanna thank you for teaching me Coding i was blank but with you i have now some knowledge........May God give you more years so we can learn more from the tutor.........Happy New Year ED...
This is something on my todo list so thank you for this.
I wish you a great 2020!
For everyone who's trying to seperate the words from each other: just insert ' ' (without qotation marks) wherever you want the space to be in your html document.
Thanks for that !! What I don't understand is why the spaces were showing for me early in the tutorial, but then they disappeared for the final product. Even in Ed's example at the end, sometimes the spaces are displaying, but then they are gone in the next cut.
Amazingly helpful video! This was well worth 14 minutes; the explanations were brief, but thorough and the main example was easy to follow. Hope to see more from you soon!
Damn i had known html for years but i only typed in the tags and was boring when i first tried using it. Now i got to learn css and javascript.
BOOO! 🔥 a vast new world of web development has been opened up for me...
Thank you so much for making this kind of videos and please keep it coming (especially would appreciate if its tagged with javascript based content). :D
YES I DID WATCH YOUR COURSE YES I DID BUY YOUR TUTORIAL AND YES IT IS AWESOME. ZHANK you.
Happy new year!!!!! We are real tech. Get this thing going my man!
congrats on 500k sub
You are hilarious; I love when teachers are vibrant.
"The knowledge in our soul. What?" Hilarious!
Wish you a very happy new year Ed and thanks for making 2018 so exciting by creating these videos. Love you man!
I never get bored watching your videos 😊❤️
I love the way you said : Who need that?
How can you be so funny and productive at the same time ? 😅😅😅😅😅 Legendary man hahaha
I would like to donate 1000 Likes for this tiny but quite creative project. That's the knowledge in our soul that how we use javaScript in creative way. Thank you Ed.
12:06 the whitespace between Fancy and Schemnzy disappeared. Any reason for it ??
This is AMAZING !!
Thank you so much for the great fun content ❤️
If for some reason the animation doesn't work, use this line in your code
.fade:not(.show) {
opacity: 1;
}
i wish that help someone!
pd: Thank for share this knowledge Dev Ed
Thanks buddy it hepled me😁😃🌝
tks, very helpfull, i have the same issue. I dont know why, so im very pleased if someone explains me that.
I love how enthusiastic you are. Thanks man great tuts.
Great video as always!
Thanks, and happy new year!
Happy new year bro... thank you so much for everything 🥳🎉 love the way you speak...feels like Jim Carrey teaching Javascript lol 😀
Happy New Year our gorgeous friend!! 🤩
See you in 2020!
Happy holidays Ed! Ty for all of your tuts! 🎉🎉
ED you are amazing. All the best in New Year, happy holiday and I cant w8 for new video.
happy holiday ed and thank you for your education, it really help me to understand about web design.. keep going mate
Thank you bro i will do this it amazing bro : )
10:06 " Compiler error : an expecting ; is missing x) ", thank you for the explanation you are the best
I always love your tutorial! Thank you very much. You're a great developer
Happy New Year Ed! Keep up the good work.
You really made an impressive work man! Keep doing bud. Happy new year!
Happy holidays and happy New year to you , Sir.
Thank you so much! Happy New Year Fancy Teacher! 🙏
You are a very good teacher and i love all of your videos =) Happy New Year and best wishes from my little island, Reunion Island in Indian Ocean =)
I'm learning to code and the same time learning English with you haha
Gracias por tus clases
Thank you for everything
Happy New Year
I missheard tech channel to pet channel. I got so excited..
Your ending was great....
I'm in love with gsap, but this is way cool. Happy New Year friend, new sub looking forward to your work into 2020.
That was gorgeous :3
Awesome video... When it comes to css we need to constantly watch and practice and keep these projects in shelf
Happy New Year , my friend
i am a new fan! Love your videos!
With use of inline-block..The space has been lost between the names..!!! Very very good content..!! Lots of love from india..!! 😍😍😍😍
thanks for making more javascript tutorials
nice short practical tutorial ed my georgous friend
My Christmas presents were empty too... until you posted this video :)
Well happy New year to you too mate hope it's a blast for you🎉🎊
wow, it was super interesting! thank you for all your tutorials!
This is really great Ed. Thank you so much for the time!
Great tutorial, thank you for this! I implemented it on my portfolio website.
Thank you very much ! You are magician ! I love putting animation effect on my website.
🔥👏🏻thank you for all the cool tutorials!
Its works perfectly for my h2 tag but when i tried for my small paragraph its literally joins with my heading and becomes single line . Me trying to fix it but cant can anyone help?
The best thing to start the morning. Thank you :)
I’m astonished that you can type code while talking without any breaks and mistakes. How did you do that?🤩
Practice
You're a role model♥️❤️♥️❤️♥️
I am watching this today and I got a new year wish :))
on my, you make complicated things very easy, thank you so much. You are awesome.
I was following this tutorial very carefully but at the end when you said "fill it in baby", I just lost it then. 😂
Nice hair style deved..👌
thanks! I washed!
best notification...
He needs a t-shirt with a "y u do tis" quote
Happy New Year. Look forward to more shenanigans
Thanks, Happy New year
Would love to see more videos like this. See you in 2020!
working on a project will this will fit in so perfectly! Thanks!!!
give the span a min-width to 2px for the space between words to remain intact
Thanks so much. I learnt a lot from this tutorial.
Thanks for the Inspiration! Legendary videos!
You are just simply Superb✌Great work🙌
いつも日本から観てます。
thank you！！
13:17 "WOW! ...Like, share & subscribe..." 😂😂😂
Vielen Dank für deine tollen Videos. Your passion and devotion are contagious and your awesome videos and they are sooo very helpful =D
Love the wolverine hairstyle
display inline-block eats up the space we had between the two words. Kept banging my head for 30 mins but later saw it's happening in your case too. Any reason on why this is happening?
thanks dude it's really worked :)
I love this tutorial. How would you create a space between the words? I noticed towards the end steps that the text was all together.
add between the words
you are amazing and hilarious💙 jingle bells!
Awesome effect!
You are the best.. Love your videos
Thanks eds but i think we can do it with keyframe animation as well and it would be more simple
Create span for each letter and then set positions and into keyframes we can set position top with opacity for our effect.
Thank you for this tutorial!
Thanks. But any fix for those spaces between text?
Flipping awesome.
sir please teach the detailed version of the famous vanilla tilt js 3d pralax effect and all that
this was great thank you so much!!
GREAT TUTORIAL! I loved every second of it! :) :)
Anyone knows how to put spaces between the words??
Whats the music starting at 1:37? Great song, but I definitely think you should include credits for your vids.
thank bro, u saved my 2hours ))
Hey Ed. I really like your style and videos. But, like, I don't know how skillful you are in JS, because you used *3* different variables in order to get the into an array of chars.... you could literally just do it all on the same variable: const splitedText = document.querySelector('.fancy').textContent.split('');
It may be a little verbose, but it's actually way easier and more efficient.
Anyways, I love your videos - looking forward for 2020!!
Tomer.
Not sure about your proficiency as well. You need to have your code reusable and readable
In this particular example your approach will work, however it’s not really the recommended one.
@@karlmalks3787 How come? My code works, and it's way more concise and efficient..
Tomer Shechner working does not necessarily mean it’s readable and reusable. if(var.toString().len() == 4) {
return true;}
This will check the Boolean true, it’s working
Is it good though ? :)
@@karlmalks3787 No, because you could've just do: return var.toString().len() === 4;
Tomer Shechner haha
You could if(var) and that’s it.
Great, i was looking for some nice text animation effect😊
That's really cool.
"fill it in baby, fill it right up"