If you find this video helpful, give it a like as this would help it reach even more people! Also, subscribe if you haven't ! Thank you! 🙏 👉 Source Code Available Here: 🌱devmadeeasy.gumroad.com/l/texttypinganimation
You know you could have different colours for each word. Change the typing animation to be the same length as the slide animation. Then split the typing animation into 4 parts (for the 4 words) 0-25, 25-50, 50-75, 75-100. Change the text colour in the animation.
Hello ! Great video and very well explained! In fact I integrated a dark mode on my site. As a result, the background works well on the white background (the text is removed) but not on my gray background. Do you have any recommendations? Thanks !
Hello Web Warior, thank you for your kind words! I'm glad I could assist you. While JavaScript is a powerful programming language, many tasks can be accomplished without it as well. If you have any more questions or need further assistance, feel free to ask.
I'm glad you liked it, you can change these values depending on what you think will look best in your project and the size of the words used... Happy Coding!!
@@aakaashsenthilkumar1915 30px is the letter size, if you increase the font-size u will need to increase to his width on animation. Now the -360px i think when appear "Im TH-camr" the dynamic text only have 90px height, if u put -360 on top that text will up, and the next text will take his place and go up too, until the steps end. i dont know too im newbie 💫💫💫💫
Hello Dev, how are you doing? The first instance ensures the text is positioned relative to its container, not the entire page. The second instance creates the effect of each letter appearing one at a time, by positioning each letter relative to the previous one. In short, position: relative; is used to position the text and create the typing effect. Happy Coding my Friend!
Olá, sou do Brasil. Você poderia me ajudar a arrumar meu código? Estou desenvolvendo meu portfólio com base em outro, porém onde eu quero que tenha a animação do seu vídeo, as letras ficaram todas da mesma cor.
You can follow these steps: Download the CSS and JavaScript files from the GitHub repository. In your Squarespace site, go to the page where you want to add the typing animation. Open the page editor and click on the Settings icon. Click on the Advanced tab. Click on the Code Injection option. In the header section, copy and paste the link to the JavaScript file you downloaded in step 1. In the header section, copy and paste the CSS code from the CSS file you downloaded in step 1. Save the changes. Back in the page editor, insert an HTML block where you want the text animation to appear. Copy and paste the HTML code from the GitHub repository into the HTML block. Modify the text inside the HTML block to display the text you want to animate. Save and publish your changes. Happy Coding!
Hello DEV to make the provided HTML and CSS code responsive, you can apply a few adjustments. Here's how you can modify the code: 1) Use relative units for font sizes: Instead of fixed font sizes, use relative units like percentages or em to make the text adapt to different screen sizes. 2)Utilize media queries: Define different CSS rules for different screen sizes using media queries. Adjust the layout and styles based on the screen width. Happy Coding.
Hey Dev, how are you doing? I did it before in this channel, now we have 2 ways of doing it: with and without JS: Check it out: 🎬Type Writer Effect | JavaScript 👉 th-cam.com/video/vIkolkvsDrU/w-d-xo.html
u just make your tricky mind to make like this but it cant be a good tutorial becaise of if wanna write something bellow this section i cant..u know what I mean
If you find this video helpful, give it a like as this would help it reach even more people! Also, subscribe if you haven't ! Thank you! 🙏
👉 Source Code Available Here:
🌱devmadeeasy.gumroad.com/l/texttypinganimation
Same idea as codingnepal
Did you copy?
OMG.. such an amazing creativity!! really great .... we'll request you more such valuable lessons please. !!
More to come!
Epic, I thought wasn't possible without javascript
Is there a way to make the marker (border) stop at the end of each word? Right now it's stopping at the last letter of the longest word in the list.
wow, very cool. I wasn't sure how you could achieve that effect without JS.
Glad you like it!
th-cam.com/video/TZ2RePbCrk8/w-d-xo.html
Check this also
Diwali animation using html and css
th-cam.com/video/8xAUi0UzSGw/w-d-xo.html
loved it absolutely, simple and effective!
Awesome, thank you!
Wow 😲 i understand only one attempt and i make it
By
Little help
Thanks 👍
Happy to help
You know you could have different colours for each word. Change the typing animation to be the same length as the slide animation. Then split the typing animation into 4 parts (for the 4 words) 0-25, 25-50, 50-75, 75-100. Change the text colour in the animation.
bro this was bloody brilliant
I'm glad you liked it...
Happy Coding my Friend!
Hello ! Great video and very well explained!
In fact I integrated a dark mode on my site. As a result, the background works well on the white background (the text is removed) but not on my gray background. Do you have any recommendations? Thanks !
Hello Web Warrior, thanks for the info!
I am glad you liked it!
Can you show me your code, so I can help?
Happy Coding!
l loved it.انه رائع لك كل التحية from syria
I am glad you liked it!
Happy Coding!
wow, amazing ,I can't believe you will do it without Js.
Hello Web Warior, thank you for your kind words! I'm glad I could assist you.
While JavaScript is a powerful programming language, many tasks can be accomplished without it as well. If you have any more questions or need further assistance, feel free to ask.
This is awesome guys !! I got a perfect solution from here.
Have a nice jurney, Thank you so much...
Glad it helped!
@@DevMadeEasy Go ahed,,,,
Sir I have request If you make a skill section like circle progressbar,
We will lot benifite....
how do i hide the text if i have a background img???
pls help
ps. i dont want it to get rid of it
The short answer is "you can't" but you can replace the typing animation with a fade animation.
My background is an image so what CSS property should I change in order to have the erase effect?
I did another one on my channel using a photo like a background:
th-cam.com/video/BE5ebdIAv24/w-d-xo.html
Happy Coding my friend,.
This only works when your background is a uniform color. It doesn't work on a background image.
You could do it with clip path and property animation.
Great video ☺️
Please keep going 🥳
Have 2 questions
1- in calc(100% +30px )
Why 30 px ?
2- why using -360 ?
I'm glad you liked it, you can change these values depending on what you think will look best in your project and the size of the words used...
Happy Coding!!
Were you able to figure out why he used those values? I am having trouble picking values for myself
Diwali animation using html and css
th-cam.com/video/8xAUi0UzSGw/w-d-xo.html
@@aakaashsenthilkumar1915 30px is the letter size, if you increase the font-size u will need to increase to his width on animation.
Now the -360px i think when appear "Im TH-camr" the dynamic text only have 90px height, if u put -360 on top that text will up, and the next text will take his place and go up too, until the steps end. i dont know too im newbie 💫💫💫💫
very good!!!
I am glad TH-cam liked it!
Everything is great but I wished that cursor would blink
if one of the list items is short and another is very long then the animation continues for a long time after the short word how do i fix this
how did you have 2 things in 1 line but 1 in the upper line and one in the under line? in the first of the video
Amazing video
Glad you think so!
thank you
You're welcome!
I am glad you liked it.
Happy Coding my friend.
Really helpful super clear and easy ty!
Great to hear!
Diwali animation using html and css
th-cam.com/video/8xAUi0UzSGw/w-d-xo.html
How apply this work to WordPress home page
first I wanna ask you why you made the position relative in two times. Can u expalin
Hello Dev, how are you doing?
The first instance ensures the text is positioned relative to its container, not the entire page.
The second instance creates the effect of each letter appearing one at a time, by positioning each letter relative to the previous one.
In short, position: relative; is used to position the text and create the typing effect.
Happy Coding my Friend!
For 5 elements make
animation: slide 15s steps(5) infinite;
@keyframes slide {
100% {
top: -450px;
}
}
Olá, sou do Brasil. Você poderia me ajudar a arrumar meu código? Estou desenvolvendo meu portfólio com base em outro, porém onde eu quero que tenha a animação do seu vídeo, as letras ficaram todas da mesma cor.
Olá DEV, voce poderia postar seu código lá no CodePen e compartilhar aqui, daí podemos ver o erro e ajudá-lo.
Happy Coding!
Hi! how can I add this to my squarespace site? thanks!
You can follow these steps:
Download the CSS and JavaScript files from the GitHub repository.
In your Squarespace site, go to the page where you want to add the typing animation.
Open the page editor and click on the Settings icon.
Click on the Advanced tab.
Click on the Code Injection option.
In the header section, copy and paste the link to the JavaScript file you downloaded in step 1.
In the header section, copy and paste the CSS code from the CSS file you downloaded in step 1.
Save the changes.
Back in the page editor, insert an HTML block where you want the text animation to appear.
Copy and paste the HTML code from the GitHub repository into the HTML block.
Modify the text inside the HTML block to display the text you want to animate.
Save and publish your changes.
Happy Coding!
Very clever!
Glad you think so!
Happy Coding!
How could I add text on the other side of the animation that is still inline
Hey dev, send me you code, so I can see what you trying to do...
I will healp you out...
You can post it at CodePen, then share it with me...
THANK YOU MAN !!
Glad it helped!
Min-height: 100vh; can I give it to the “div” in the body rather than the “body”?
Yeah it's okay 👌🏻
Diwali animation using html and css
th-cam.com/video/8xAUi0UzSGw/w-d-xo.html
thats in a color background, how i do in a background image?
I did another one on my channel using a photo like a background:
th-cam.com/video/BE5ebdIAv24/w-d-xo.html
Happy Coding my friend,.
Taking so much time
Hello Web Warrior🥷
I am glad you like it!
Happy Coding my Friend!
Can you tell me how to make these responsive
Hello DEV to make the provided HTML and CSS code responsive, you can apply a few adjustments. Here's how you can modify the code:
1) Use relative units for font sizes: Instead of fixed font sizes, use relative units like percentages or em to make the text adapt to different screen sizes.
2)Utilize media queries: Define different CSS rules for different screen sizes using media queries. Adjust the layout and styles based on the screen width.
Happy Coding.
Hey can you please give the code of this (that html file )🙏🙏🙏
how to use this without the cursor
how can i do this with background image?
I did the same effect with a background Image....
th-cam.com/video/BE5ebdIAv24/w-d-xo.html
Happy Coding!
@@DevMadeEasy i mean when is background image behind typing animation
Thanks it helped a lot 😌
Glad it helped!
Thanks Man
Any time
*_good ... ocay ..._*
Hey Syed, I'm glad you liked it!
i do it every thing but dose not work
Hello 99% of the time it is a typo.
Contact me via facebook and I'll send you the code.
Happy Coding my friend!
Plz do it with pure Js without using typed.js
Hey Dev, how are you doing?
I did it before in this channel, now we have 2 ways of doing it: with and without JS:
Check it out:
🎬Type Writer Effect | JavaScript
👉 th-cam.com/video/vIkolkvsDrU/w-d-xo.html
sammer
u just make your tricky mind to make like this but it cant be a good tutorial becaise of if wanna write something bellow this section i cant..u know what I mean
There are no limits to what you can do here.
Keep using CSS and if you need something more powerful use JavaScript, simple as that.
Happy Coding!
not working
pls help
Can you please share you coding with us?
I'm happy to help you.
Let me tell you something 99% of the time it's just a typo somewhere.
Let me know!
*_responsive complete web design required ..._*
Hey Dev, I'm glad you liked it!!!
Can you give source code
It is in the video description
*_good ... may chee later ..._*
Hey Dev, good to see you here...
This is a great project for you to improve your dev skills!
not responsive
Hey Diana, how are you doing? It can be easily done using Media Queries...
Happy Coding!