CSS Text Typing Animation | HTML & CSS

[@DevMadeEasy]

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

[@designdesk7728]

Same idea as codingnepal

[@designdesk7728]

Did you copy?

[@technoworldnow3571]

OMG.. such an amazing creativity!! really great .... we'll request you more such valuable lessons please. !!

[@DevMadeEasy]

More to come!

[@v_kzzz]

Epic, I thought wasn't possible without javascript

[@yodafootball5000]

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.

[@WherezTheMilk]

bro this was bloody brilliant

[@DevMadeEasy]

I'm glad you liked it... Happy Coding my Friend!

[@satyamjatt6385]

Wow 😲 i understand only one attempt and i make it By Little help Thanks 👍

[@DevMadeEasy]

Happy to help

[@rafiatala8421]

l loved it.انه رائع لك كل التحية from syria

[@DevMadeEasy]

I am glad you liked it! Happy Coding!

[@kevinronald7171]

My background is an image so what CSS property should I change in order to have the erase effect?

[@DevMadeEasy]

I did another one on my channel using a photo like a background: kzbin.info/www/bejne/eHaYlpWafqapaJY Happy Coding my friend,.

[@anonymousperson8896]

how do i hide the text if i have a background img??? pls help ps. i dont want it to get rid of it

[@SteveJohnSteele]

The short answer is "you can't" but you can replace the typing animation with a fade animation.

[@anuragkasudhan3734]

loved it absolutely, simple and effective!

[@DevMadeEasy]

Awesome, thank you!

[@thegratemuslim]

This is awesome guys !! I got a perfect solution from here. Have a nice jurney, Thank you so much...

[@DevMadeEasy]

Glad it helped!

[@thegratemuslim]

@@DevMadeEasy Go ahed,,,,

[@thegratemuslim]

Sir I have request If you make a skill section like circle progressbar, We will lot benifite....

[@kaynesheenan]

wow, very cool. I wasn't sure how you could achieve that effect without JS.

[@DevMadeEasy]

Glad you like it!

[@bharathasalli6129]

kzbin.info/www/bejne/iouVg5iGl6iloZo Check this also

[@tposell1450]

Diwali animation using html and css kzbin.info/www/bejne/bqmkhpxmit-Gfdk

[@karinkaufer5251]

Hi! how can I add this to my squarespace site? thanks!

[@DevMadeEasy]

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!

[@SteveJohnSteele]

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.

[@yewinnaing9826]

first I wanna ask you why you made the position relative in two times. Can u expalin

[@DevMadeEasy]

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!

[@randabadawy4170]

wow, amazing ,I can't believe you will do it without Js.

[@DevMadeEasy]

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.

[@Ahrinoma]

How could I add text on the other side of the animation that is still inline

[@DevMadeEasy]

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

[@AlexanderImbaPaucar]

thats in a color background, how i do in a background image?

[@DevMadeEasy]

I did another one on my channel using a photo like a background: kzbin.info/www/bejne/eHaYlpWafqapaJY Happy Coding my friend,.

[@amerlopo]

how can i do this with background image?

[@DevMadeEasy]

I did the same effect with a background Image.... kzbin.info/www/bejne/eHaYlpWafqapaJY Happy Coding!

[@amerlopo]

@@DevMadeEasy i mean when is background image behind typing animation

[@tachisnofansub]

Really helpful super clear and easy ty!

[@DevMadeEasy]

Great to hear!

[@tposell1450]

Diwali animation using html and css kzbin.info/www/bejne/bqmkhpxmit-Gfdk

[@jesussantiago2408]

very good!!!

[@DevMadeEasy]

I am glad KZbin liked it!

[@shlomiashkenazi8844]

Amazing video

[@DevMadeEasy]

Glad you think so!

[@EbayChatFailsMain]

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

[@dtheminiature2921]

This only works when your background is a uniform color. It doesn't work on a background image.

[@BliitzPint]

You could do it with clip path and property animation.

[@yanmantovani4421]

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.

[@DevMadeEasy]

Olá DEV, voce poderia postar seu código lá no CodePen e compartilhar aqui, daí podemos ver o erro e ajudá-lo. Happy Coding!

[@GODLXSPEEDGOD]

Can you tell me how to make these responsive

[@DevMadeEasy]

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.

[@Yourgopal21]

How apply this work to WordPress home page

[@kaziikram9312]

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

[@Adziwo]

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 !

[@DevMadeEasy]

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!

[@dadethenull]

Min-height: 100vh; can I give it to the “div” in the body rather than the “body”?

[@mrrobot5713]

Yeah it's okay 👌🏻

[@tposell1450]

Diwali animation using html and css kzbin.info/www/bejne/bqmkhpxmit-Gfdk

[@meetchothani3737]

Thanks it helped a lot 😌

[@DevMadeEasy]

Glad it helped!

[@PRIME-gr3gs]

THANK YOU MAN !!

[@DevMadeEasy]

Glad it helped!

[@gregduncan5993]

Very clever!

[@DevMadeEasy]

Glad you think so! Happy Coding!

[@tusharsharma6518]

Hey can you please give the code of this (that html file )🙏🙏🙏

[@maxzampieri6846]

For 5 elements make animation: slide 15s steps(5) infinite; @keyframes slide { 100% { top: -450px; } }

[@MuhammadAsad-j6m]

Everything is great but I wished that cursor would blink

[@helakajayakody2853]

how to use this without the cursor

[@sanjanasharma-rh8ek]

thank you

[@DevMadeEasy]

You're welcome! I am glad you liked it. Happy Coding my friend.

[@hagergamal2856]

Great video ☺️ Please keep going 🥳 Have 2 questions 1- in calc(100% +30px ) Why 30 px ? 2- why using -360 ?

[@DevMadeEasy]

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]

Were you able to figure out why he used those values? I am having trouble picking values for myself

[@tposell1450]

Diwali animation using html and css kzbin.info/www/bejne/bqmkhpxmit-Gfdk

[@Coder_Amateur]

@@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 KZbinr" 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 💫💫💫💫

[@iwonder9606]

Taking so much time

[@DevMadeEasy]

Hello Web Warrior🥷 I am glad you like it! Happy Coding my Friend!

[@arifmahmud5969]

Thanks Man

[@DevMadeEasy]

Any time

[@عينهاء-ظ4ش]

i do it every thing but dose not work

[@DevMadeEasy]

Hello 99% of the time it is a typo. Contact me via facebook and I'll send you the code. Happy Coding my friend!

[@syediqbalahmed3176]

*_good ... ocay ..._*

[@DevMadeEasy]

Hey Syed, I'm glad you liked it!

[@NoorAli-eb6us]

Plz do it with pure Js without using typed.js

[@DevMadeEasy]

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 👉 kzbin.info/www/bejne/rHrOoJ-hq9h3qLc

[@mayankagrawal345]

not working pls help

[@DevMadeEasy]

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!

[@quotexofficialbd]

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

[@DevMadeEasy]

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!

[@mohamedamaan133]

Can you give source code

[@DevMadeEasy]

It is in the video description

[@syediqbalahmed3176]

*_responsive complete web design required ..._*

[@DevMadeEasy]

Hey Dev, I'm glad you liked it!!!

[@syediqbalahmed3176]

*_good ... may chee later ..._*

[@DevMadeEasy]

Hey Dev, good to see you here... This is a great project for you to improve your dev skills!

[@slazx141]

sammer

[@DianaSofialp2000]

not responsive

[@DevMadeEasy]

Hey Diana, how are you doing? It can be easily done using Media Queries... Happy Coding!