CSS Text Typing Animation

No video

CSS Text Typing Animation | HTML & CSS

Рет қаралды 45,242

Web Dev Made Easy

Күн бұрын

Пікірлер: 101

@DevMadeEasy 3 жыл бұрын

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 2 жыл бұрын

Same idea as codingnepal

@designdesk7728 2 жыл бұрын

Did you copy?

@technoworldnow3571 3 күн бұрын

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

@DevMadeEasy 2 күн бұрын

More to come!

@yodafootball5000 2 жыл бұрын

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.

@kaynesheenan 3 жыл бұрын

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

@DevMadeEasy 3 жыл бұрын

Glad you like it!

@bharathasalli6129 2 жыл бұрын

kzfaq.info/get/bejne/isBihciBx6nWm2w.html Check this also

@tposell1450 Жыл бұрын

Diwali animation using html and css kzfaq.info/get/bejne/bt5xiMxhuuC3d6s.html

@sanjanasharma-rh8ek 5 ай бұрын

thank you

@DevMadeEasy 5 ай бұрын

You're welcome! I am 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

@dtheminiature2921 2 жыл бұрын

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

@anuragkasudhan3734 Жыл бұрын

loved it absolutely, simple and effective!

@DevMadeEasy Жыл бұрын

Awesome, thank you!

@WherezTheMilk 9 ай бұрын

bro this was bloody brilliant

@DevMadeEasy 9 ай бұрын

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

@rafiatala8421 Жыл бұрын

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

@DevMadeEasy Жыл бұрын

I am glad you liked it! Happy Coding!

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

@MuhammadAsad-j6m 20 күн бұрын

Everything is great but I wished that cursor would blink

@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 5 ай бұрын

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

@mdlitonmiah7477 2 жыл бұрын

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

@DevMadeEasy 2 жыл бұрын

Glad it helped!

@mdlitonmiah7477 2 жыл бұрын

@@DevMadeEasy Go ahed,,,,

@mdlitonmiah7477 2 жыл бұрын

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

@hagergamal2856 2 жыл бұрын

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

@DevMadeEasy 2 жыл бұрын

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 2 жыл бұрын

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 kzfaq.info/get/bejne/bt5xiMxhuuC3d6s.html

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

@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!

@SteveJohnSteele 5 ай бұрын

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.

@iwonder9606 Жыл бұрын

Taking so much time

@DevMadeEasy Жыл бұрын

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

@jesussantiago2408 Жыл бұрын

very good!!!

@DevMadeEasy Жыл бұрын

I am glad KZfaq liked it!

@kaziikram9312 2 жыл бұрын

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

@PRIME-gr3gs 2 жыл бұрын

THANK YOU MAN !!

@DevMadeEasy 2 жыл бұрын

Glad it helped!

@tachisnofansub 2 жыл бұрын

Really helpful super clear and easy ty!

@DevMadeEasy 2 жыл бұрын

Great to hear!

@tposell1450 Жыл бұрын

Diwali animation using html and css kzfaq.info/get/bejne/bt5xiMxhuuC3d6s.html

@shlomiashkenazi8844 2 жыл бұрын

Amazing video

@DevMadeEasy 2 жыл бұрын

Glad you think so!

@EbayChatFailsMain 2 жыл бұрын

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

@kevinronald7171 9 ай бұрын

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

@DevMadeEasy 8 ай бұрын

I did another one on my channel using a photo like a background: kzfaq.info/get/bejne/eKtlmMWVrqfaYmg.html Happy Coding my friend,.

@meetchothani3737 2 жыл бұрын

Thanks it helped a lot 😌

@DevMadeEasy 2 жыл бұрын

Glad it helped!

@gregduncan5993 2 жыл бұрын

Very clever!

@DevMadeEasy 2 жыл бұрын

Glad you think so! Happy Coding!

@arifmahmud5969 3 жыл бұрын

Thanks Man

@DevMadeEasy 3 жыл бұрын

Any time

@Yourgopal21 2 жыл бұрын

How apply this work to WordPress home page

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

@user-iv9xq8nh5t 8 ай бұрын

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

@DevMadeEasy 8 ай бұрын

I did another one on my channel using a photo like a background: kzfaq.info/get/bejne/eKtlmMWVrqfaYmg.html Happy Coding my friend,.

@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!

@karanchavda1816 4 ай бұрын

Can you tell me how to make these responsive

@DevMadeEasy 4 ай бұрын

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.

@helakajayakody2853 2 жыл бұрын

how to use this without the cursor

@yanmantovani4421 2 жыл бұрын

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 2 жыл бұрын

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

@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!

@syediqbalahmed3176 3 жыл бұрын

*_good ... ocay ..._*

@DevMadeEasy 3 жыл бұрын

Hey Syed, I'm glad you liked it!

@maxzampieri6846 2 жыл бұрын

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

@tusharsharma6518 2 жыл бұрын

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

@davideliuzzi7770 2 жыл бұрын

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

@mrrobot5713 2 жыл бұрын

Yeah it's okay 👌🏻

@tposell1450 Жыл бұрын

Diwali animation using html and css kzfaq.info/get/bejne/bt5xiMxhuuC3d6s.html

@amerlopo 8 ай бұрын

how can i do this with background image?

@DevMadeEasy 8 ай бұрын

I did the same effect with a background Image.... kzfaq.info/get/bejne/eKtlmMWVrqfaYmg.html Happy Coding!

@amerlopo 8 ай бұрын

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

@user-zy9gv9vc3p 2 жыл бұрын

i do it every thing but dose not work

@DevMadeEasy 2 жыл бұрын

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

@slazx141 11 ай бұрын

sammer

@mayankagrawal345 2 жыл бұрын

not working pls help

@DevMadeEasy 2 жыл бұрын

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!

@NoorAli-eb6us 3 жыл бұрын

Plz do it with pure Js without using typed.js

@DevMadeEasy 3 жыл бұрын

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 👉 kzfaq.info/get/bejne/rK-bos-c29moook.html

@quotexofficialbd 2 жыл бұрын

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 2 жыл бұрын

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!