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
@designdesk77282 жыл бұрын
Same idea as codingnepal
@designdesk77282 жыл бұрын
Did you copy?
@technoworldnow35713 күн бұрын
OMG.. such an amazing creativity!! really great .... we'll request you more such valuable lessons please. !!
@DevMadeEasy2 күн бұрын
More to come!
@yodafootball50002 жыл бұрын
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.
@kaynesheenan3 жыл бұрын
wow, very cool. I wasn't sure how you could achieve that effect without JS.
@DevMadeEasy3 жыл бұрын
Glad you like it!
@bharathasalli61292 жыл бұрын
kzfaq.info/get/bejne/isBihciBx6nWm2w.html Check this also
@tposell1450 Жыл бұрын
Diwali animation using html and css kzfaq.info/get/bejne/bt5xiMxhuuC3d6s.html
@sanjanasharma-rh8ek5 ай бұрын
thank you
@DevMadeEasy5 ай бұрын
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
@dtheminiature29212 жыл бұрын
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!
@WherezTheMilk9 ай бұрын
bro this was bloody brilliant
@DevMadeEasy9 ай бұрын
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-j6m20 күн бұрын
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
@SteveJohnSteele5 ай бұрын
The short answer is "you can't" but you can replace the typing animation with a fade animation.
@mdlitonmiah74772 жыл бұрын
This is awesome guys !! I got a perfect solution from here. Have a nice jurney, Thank you so much...
@DevMadeEasy2 жыл бұрын
Glad it helped!
@mdlitonmiah74772 жыл бұрын
@@DevMadeEasy Go ahed,,,,
@mdlitonmiah74772 жыл бұрын
Sir I have request If you make a skill section like circle progressbar, We will lot benifite....
@hagergamal28562 жыл бұрын
Great video ☺️ Please keep going 🥳 Have 2 questions 1- in calc(100% +30px ) Why 30 px ? 2- why using -360 ?
@DevMadeEasy2 жыл бұрын
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!!
@aakaashsenthilkumar19152 жыл бұрын
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!
@SteveJohnSteele5 ай бұрын
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!
@kaziikram93122 жыл бұрын
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-gr3gs2 жыл бұрын
THANK YOU MAN !!
@DevMadeEasy2 жыл бұрын
Glad it helped!
@tachisnofansub2 жыл бұрын
Really helpful super clear and easy ty!
@DevMadeEasy2 жыл бұрын
Great to hear!
@tposell1450 Жыл бұрын
Diwali animation using html and css kzfaq.info/get/bejne/bt5xiMxhuuC3d6s.html
@shlomiashkenazi88442 жыл бұрын
Amazing video
@DevMadeEasy2 жыл бұрын
Glad you think so!
@EbayChatFailsMain2 жыл бұрын
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
@kevinronald71719 ай бұрын
My background is an image so what CSS property should I change in order to have the erase effect?
@DevMadeEasy8 ай бұрын
I did another one on my channel using a photo like a background: kzfaq.info/get/bejne/eKtlmMWVrqfaYmg.html Happy Coding my friend,.
@meetchothani37372 жыл бұрын
Thanks it helped a lot 😌
@DevMadeEasy2 жыл бұрын
Glad it helped!
@gregduncan59932 жыл бұрын
Very clever!
@DevMadeEasy2 жыл бұрын
Glad you think so! Happy Coding!
@arifmahmud59693 жыл бұрын
Thanks Man
@DevMadeEasy3 жыл бұрын
Any time
@Yourgopal212 жыл бұрын
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-iv9xq8nh5t8 ай бұрын
thats in a color background, how i do in a background image?
@DevMadeEasy8 ай бұрын
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!
@karanchavda18164 ай бұрын
Can you tell me how to make these responsive
@DevMadeEasy4 ай бұрын
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.
@helakajayakody28532 жыл бұрын
how to use this without the cursor
@yanmantovani44212 жыл бұрын
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.
@DevMadeEasy2 жыл бұрын
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!
@syediqbalahmed31763 жыл бұрын
*_good ... ocay ..._*
@DevMadeEasy3 жыл бұрын
Hey Syed, I'm glad you liked it!
@maxzampieri68462 жыл бұрын
For 5 elements make animation: slide 15s steps(5) infinite; @keyframes slide { 100% { top: -450px; } }
@tusharsharma65182 жыл бұрын
Hey can you please give the code of this (that html file )🙏🙏🙏
@davideliuzzi77702 жыл бұрын
Min-height: 100vh; can I give it to the “div” in the body rather than the “body”?
@mrrobot57132 жыл бұрын
Yeah it's okay 👌🏻
@tposell1450 Жыл бұрын
Diwali animation using html and css kzfaq.info/get/bejne/bt5xiMxhuuC3d6s.html
@amerlopo8 ай бұрын
how can i do this with background image?
@DevMadeEasy8 ай бұрын
I did the same effect with a background Image.... kzfaq.info/get/bejne/eKtlmMWVrqfaYmg.html Happy Coding!
@amerlopo8 ай бұрын
@@DevMadeEasy i mean when is background image behind typing animation
@user-zy9gv9vc3p2 жыл бұрын
i do it every thing but dose not work
@DevMadeEasy2 жыл бұрын
Hello 99% of the time it is a typo. Contact me via facebook and I'll send you the code. Happy Coding my friend!
@slazx14111 ай бұрын
sammer
@mayankagrawal3452 жыл бұрын
not working pls help
@DevMadeEasy2 жыл бұрын
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-eb6us3 жыл бұрын
Plz do it with pure Js without using typed.js
@DevMadeEasy3 жыл бұрын
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
@quotexofficialbd2 жыл бұрын
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
@DevMadeEasy2 жыл бұрын
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!
@mohamedamaan1332 жыл бұрын
Can you give source code
@DevMadeEasy Жыл бұрын
It is in the video description
@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!
@syediqbalahmed31763 жыл бұрын
*_responsive complete web design required ..._*
@DevMadeEasy3 жыл бұрын
Hey Dev, I'm glad you liked it!!!
@DianaSofialp20002 жыл бұрын
not responsive
@DevMadeEasy2 жыл бұрын
Hey Diana, how are you doing? It can be easily done using Media Queries... Happy Coding!