CSS Text Typing Animation | Multiple Text Typing Animation

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น • 247

  • @CodingNepal
    @CodingNepal  3 ปีที่แล้ว +43

    Improved version of this Text Typing Effect
    Watch: th-cam.com/video/DLs1X9T1GcY/w-d-xo.html

    • @GamingTSH
      @GamingTSH 3 ปีที่แล้ว

      Programming By TSH --- This channel is so good too

    • @kinglucky5122
      @kinglucky5122 ปีที่แล้ว

      done sir.... great video

  • @nico.8046
    @nico.8046 3 ปีที่แล้ว +29

    I can't believe it, just what I needed !! hahaha thanks for sharing

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      Glad I could help!

  • @mohd.irfanlohar4544
    @mohd.irfanlohar4544 ปีที่แล้ว +5

    Bro you nailed it without js I cannot imagine 😅

  • @mimohaghimire3905
    @mimohaghimire3905 3 ปีที่แล้ว +4

    Proud that its from Nepal. Thanks for helping man, it made my day :D

  • @naveenkr.904
    @naveenkr.904 ปีที่แล้ว +1

    This is the best web development Channel ever...❤

  • @asqar_arslonov
    @asqar_arslonov 3 ปีที่แล้ว +3

    What!!!😮😮Thank you. Thank you. I can't understand how developers create animation types. Thank you

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      It's all depends on learning.

  • @mstfsgdc
    @mstfsgdc 3 ปีที่แล้ว +1

    Best front-end tutorials ever

  • @wancharo9538
    @wancharo9538 2 ปีที่แล้ว +7

    This is exactly what I am looking for!! Thank you !

    • @CodingNepal
      @CodingNepal  2 ปีที่แล้ว

      You're most welcome!

  • @Maria-sq4jl
    @Maria-sq4jl 2 ปีที่แล้ว

    It's so easy to follow u and u r not speaking! Definitely earned a new subscriber :D

  • @SuperVOVANCHO
    @SuperVOVANCHO 2 ปีที่แล้ว +8

    That's a very good tutorial, fast and clean explanation

  • @vujvvuc7673
    @vujvvuc7673 ปีที่แล้ว

    Omg!! This what i am searching for past 2 days. Thanks a lot 👍👍

  • @jawidhmuhammadh2592
    @jawidhmuhammadh2592 3 ปีที่แล้ว +15

    Brother your videos are awsome...you are covering many topics even in a single video..One kind request if you could add your voice with explaination then it would be very good for beginners like us bro....thanks for teaching us...Need more javascript projects with your voice explaination...Thank u so much bro

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +6

      I will try my best...Stay tuned with us :)

  • @vasudevkulkarni4160
    @vasudevkulkarni4160 3 ปีที่แล้ว +4

    Thank you so much!
    Keep growing

    • @GamingTSH
      @GamingTSH 3 ปีที่แล้ว

      Programming By TSH --- This channel is so good too

  • @FRONTRUS
    @FRONTRUS 3 ปีที่แล้ว +10

    Easier to use the typeit plugin) Good job 👍

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Yeah thanks and I've also made a video on it - th-cam.com/video/tcskp-ncN0I/w-d-xo.html

    • @bebinjohn5522
      @bebinjohn5522 3 ปีที่แล้ว

      @@CodingNepal 22

  • @minzcode
    @minzcode 3 ปีที่แล้ว +1

    Wow! It's an idea I didn't think of.

  • @pankajdahal8787
    @pankajdahal8787 3 ปีที่แล้ว +1

    Ekdamai ramro sir.

  • @sarthak_jadhav
    @sarthak_jadhav ปีที่แล้ว

    Loved it ❤

  • @mh_kohansal
    @mh_kohansal 3 ปีที่แล้ว

    i can't believe it, that's awesome. ty bro

  • @ShubhUSinha
    @ShubhUSinha ปีที่แล้ว +1

    I want animate it like it does backspace not at once but by letter by letter. How can I do that?

  • @aryankhandelwal15
    @aryankhandelwal15 ปีที่แล้ว

    What i needed !

  • @bryanmayodi613
    @bryanmayodi613 ปีที่แล้ว

    bro you are the goat

  • @thanhquachable
    @thanhquachable 2 ปีที่แล้ว

    This is amazing man. You earned a subscriber 😄

  • @dramabuzz4203
    @dramabuzz4203 3 ปีที่แล้ว +1

    Great tutorial..! Love from Bangladesh😍

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Thank you so much 😀

  • @ahmedatcha6326
    @ahmedatcha6326 3 ปีที่แล้ว +1

    You the best bro 🇹🇬♥️

  • @VeerpalKaur-uv9dv
    @VeerpalKaur-uv9dv ปีที่แล้ว

    Hey, please explain why did you give margin: 0 -35px 0 35px at 03:36

  • @_cursedvlogs
    @_cursedvlogs 2 ปีที่แล้ว

    Pretty much what i was thinking nice logic✨😌

  • @harshjain9004
    @harshjain9004 ปีที่แล้ว +2

    How to add 5th line in animation ??

  • @aleale8980
    @aleale8980 6 หลายเดือนก่อน

    where did u code? its cool that u can code and see the result at the same time

  • @ranvirraj1855
    @ranvirraj1855 3 ปีที่แล้ว +1

    That's what i was thinking for and you made it.Thanks

  • @pigeonmaruf5231
    @pigeonmaruf5231 3 ปีที่แล้ว +1

    bro big fan love from bangladesh dhaka

  • @jatinkumar4410
    @jatinkumar4410 3 ปีที่แล้ว +2

    Amazing... Just awesome! Thanks for the tutorial...

  • @lautarorodriguez5912
    @lautarorodriguez5912 3 ปีที่แล้ว +1

    Thanks bro, very nice!

  • @jfine24
    @jfine24 2 ปีที่แล้ว +2

    Brilliant! I enjoyed this very much! Thank you! Is there a way to backspace and then type again as if fixing a typo?

  • @iamnikhil123
    @iamnikhil123 3 ปีที่แล้ว

    Simply Awesome !

  • @nonopanzu1193
    @nonopanzu1193 2 ปีที่แล้ว

    Beautifull
    Beautifull
    Bravo!

  • @juanmacias5922
    @juanmacias5922 2 ปีที่แล้ว +2

    Thank you so much! It's such a cool effect!

    • @CodingNepal
      @CodingNepal  2 ปีที่แล้ว

      I'm glad you like it

  • @TechWithAashubro
    @TechWithAashubro 3 ปีที่แล้ว +1

    Op @keyframe trick bruh , Keep progressing

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Thank you so much 😀

  • @mattbegnoche2081
    @mattbegnoche2081 ปีที่แล้ว

    You are awesome! Thanks for this video!!!!

  • @javeriafarooq108
    @javeriafarooq108 7 หลายเดือนก่อน

    Please provide the specific placement and quantity of the duration for each animation. My text is lengthy, and if I increase the animation's duration, the text becomes distorted.

  • @Mkumarei
    @Mkumarei 3 ปีที่แล้ว +1

    😁 dhanyewad...

  • @zaibuilds
    @zaibuilds ปีที่แล้ว

    Can we make this responsive by using a media query?

  • @marutidesai1788
    @marutidesai1788 3 ปีที่แล้ว

    the background sound was amazing

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 3 ปีที่แล้ว +2

    Thank you so much Sir God bless you

  • @lashapanjavidze4730
    @lashapanjavidze4730 3 ปีที่แล้ว +1

    what do you think, which is better? to use javascript for animation like this or HTML-CSS?

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      Definitely javascript because with javascript we can do complex and more attractive animation easily. You can compare this video typing animation with this video - th-cam.com/video/tcskp-ncN0I/w-d-xo.html

  • @nochannel3
    @nochannel3 3 ปีที่แล้ว +1

    how do you paste the code in 0:42? what's the shortcut key?

  • @atharva_sabde
    @atharva_sabde 3 ปีที่แล้ว +1

    Thank you sooo much dude!!!

  • @aaryanlama519
    @aaryanlama519 ปีที่แล้ว +1

    But what if we want to add the text infront of an image, in the 41st line, what should we change?

    • @TahreBabah
      @TahreBabah 7 หลายเดือนก่อน

      i have the same question

  • @timothykirathe4585
    @timothykirathe4585 ปีที่แล้ว

    Very helpful. Thank you

  • @deepeshdhakal7476
    @deepeshdhakal7476 3 ปีที่แล้ว

    Best guys in the world

  • @LegendaryKnight
    @LegendaryKnight 3 ปีที่แล้ว +2

    Great this is coool... I will try it.
    Umm i have a question I want to know, can we import a custom template into blogger like with all the assets(css, js, plugin, etc) ... ??
    Or just want to know how to merge all the assets as xml file so that I can import it on blogger...
    Please help me...
    By the way Thanks a lot for sharing such an amazing content 🙂🤩

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      I think you need to watch blogger tutorials.

    • @LegendaryKnight
      @LegendaryKnight 3 ปีที่แล้ว

      @@CodingNepal Ohh opps...
      Can you just share the link of it plz.
      Thanks for replying.

  • @barakakinywasoftwaredevelo5941
    @barakakinywasoftwaredevelo5941 2 ปีที่แล้ว

    Amazing and easy. Congratulations!

  • @vigneshwarvenugopal922
    @vigneshwarvenugopal922 ปีที่แล้ว

    Thanks for your help codingnepal....i done by project with your help...thank you so much..

  • @iTzReckLas
    @iTzReckLas 3 ปีที่แล้ว +2

    Great bro :)

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Thanks bro😁

    • @iTzReckLas
      @iTzReckLas 3 ปีที่แล้ว

      @@CodingNepal 😅

  • @yeminaung7008
    @yeminaung7008 ปีที่แล้ว

    How to change animation seconds for only 2 li spam
    I can’t figure it out

  • @PatrikRasch
    @PatrikRasch ปีที่แล้ว

    Thank you for the idea

  • @ottokuosmanen4787
    @ottokuosmanen4787 2 ปีที่แล้ว

    Awesome!

  • @helakajayakody2853
    @helakajayakody2853 3 ปีที่แล้ว +1

    if i put 36px for font size it will be messy. what should i do to look nice

    • @sajaddadgar8762
      @sajaddadgar8762 3 ปีที่แล้ว +1

      It's proportion and for 36px font-size, you mush change the following:
      .wrapper .dynamic-txts{
      height: 54px;
      line-height: 54px;
      }
      .dynamic-txt li{
      font-size: 36px;
      }
      @keyframes slide {
      100%{
      top: -216px;
      }
      }

  • @pedrocypriano4317
    @pedrocypriano4317 3 ปีที่แล้ว +1

    Nice bro!

  • @awabmahdi7002
    @awabmahdi7002 11 หลายเดือนก่อน

    Arigato brother❤

  • @w0000lll4
    @w0000lll4 2 ปีที่แล้ว

    Amazing!! thank you for making this video. you are genius.

  • @prosenjeetsarker
    @prosenjeetsarker ปีที่แล้ว

    Help me I was having problem you can see my project 😭

  • @Dr.UdaraSenarathne
    @Dr.UdaraSenarathne 2 ปีที่แล้ว

    Thank you very much!

  • @mycodingjourney.7868
    @mycodingjourney.7868 2 ปีที่แล้ว

    Great bro

  • @AsherCarsten
    @AsherCarsten ปีที่แล้ว

    I dont know why but the animation on mine is broken like it's cut where you can see the half of the other word and anothee half of a dif word and the line is only starting at the end

  • @abdullahsoomro6238
    @abdullahsoomro6238 ปีที่แล้ว

    You are amazing broo

  • @animenation7686
    @animenation7686 3 ปีที่แล้ว +1

    In which all are you making

  • @adalovelac24
    @adalovelac24 3 ปีที่แล้ว

    i love your content
    it's short and useful

  • @ahmadsader5605
    @ahmadsader5605 3 ปีที่แล้ว

    Why when i change the steps to any number i want the thing starts bugging? i added an li and increased the steps but a weird animation is now happening
    plz help!

  • @An-yh2bl
    @An-yh2bl 2 ปีที่แล้ว

    Awesome 😊😊

  • @NaveenKumar-kv3ul
    @NaveenKumar-kv3ul 3 ปีที่แล้ว +1

    Excellent

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว

      Thank you so much 😀

    • @GamingTSH
      @GamingTSH 3 ปีที่แล้ว

      Programming By TSH --- This channel is so good too

  • @aroosafayaz2204
    @aroosafayaz2204 3 ปีที่แล้ว

    your videos awesom also u share source code well & good thanks for this kindness

  • @joannecalasanz4022
    @joannecalasanz4022 2 ปีที่แล้ว

    Love this! I just need it to be mobile responsive now. Any tips? I'm new to html and css.

  • @darshanbajgain
    @darshanbajgain ปีที่แล้ว

    Can we do by javascript? How can we do this by using Javascript? Event listener?

  • @roxeranimation1372
    @roxeranimation1372 3 ปีที่แล้ว

    that's so clever

  • @FreshDJesus
    @FreshDJesus ปีที่แล้ว

    this is very nice. But when i try to edit the font-size is the whole code broke.

  • @Olonts
    @Olonts 2 ปีที่แล้ว

    What if I want to make the animation stop after

  • @UdayKumar-iw7uo
    @UdayKumar-iw7uo ปีที่แล้ว

    thank you so much

  • @umairabdullah7777
    @umairabdullah7777 7 หลายเดือนก่อน

    Thank's lot I just wanted it

  • @harshjain8345
    @harshjain8345 3 ปีที่แล้ว +1

    Great video buddy.. Amazing!! Btw.. What's your pc specification!?... Kindly mention all in detail... Thanks!!

    • @CodingNepal
      @CodingNepal  3 ปีที่แล้ว +1

      CPU - Ryzen 3 3300
      GPU - GTX 1650
      Motherboard - MSI B450M A Pro
      Ram - 8 * 2 = 16GB
      SSD - 256 GB
      HDD - 500GB
      PSU - 550 watt

  • @ravshansavurbaev
    @ravshansavurbaev 2 ปีที่แล้ว

    amazing coding

  • @talabsa4108
    @talabsa4108 3 ปีที่แล้ว +1

    Great❤️

    • @GamingTSH
      @GamingTSH 3 ปีที่แล้ว

      Programming By TSH --- This channel is so good too

  • @samanyuv3789
    @samanyuv3789 3 ปีที่แล้ว

    Hey!, Great video but I have kept the background as linear gradient to right how to merge the color of the background in .dynamic-txts li span::after{ with the color of my body background.... Kindly reply ASAP

    • @shapind
      @shapind 3 ปีที่แล้ว

      Use background as transparent.

    • @GamingTSH
      @GamingTSH 3 ปีที่แล้ว

      Programming By TSH --- This channel is so good too

  • @sushil12345ful
    @sushil12345ful 3 ปีที่แล้ว

    Hi, do you know how I can get the texts : youtuber, developer, freelancer in the next line?

  • @SalmanShah95
    @SalmanShah95 3 ปีที่แล้ว

    How can i make it with vanilla javascript?

  • @liamdiaz6570
    @liamdiaz6570 3 ปีที่แล้ว +2

    What extension do you use to preview the code? I am a new follower!

  • @hxpelessrxmantic1741
    @hxpelessrxmantic1741 3 ปีที่แล้ว

    hey for some reason it repeats words two times for me even after using exact code, any way you can help

  • @ankushsonone8433
    @ankushsonone8433 3 ปีที่แล้ว

    Brother I try your code but this is not working for me please help. It’s not showing the output what exactly you showing in the video I follow your each and evercode but still

  • @robi199093
    @robi199093 3 ปีที่แล้ว +1

    Awesome

  • @kobebryantullao2905
    @kobebryantullao2905 2 ปีที่แล้ว

    I'm a new to htmls css, how can I make this animation responsive?

  • @AmitDutta-dn5my
    @AmitDutta-dn5my 2 ปีที่แล้ว

    Sir, I need only three-span (1. Web Developer, 2. Graphic Designer, 3. Digital Marketer). how to get this design please help me because my texts are overlapping with each other

  • @fraggerplayzzz2992
    @fraggerplayzzz2992 2 ปีที่แล้ว

    Bro i want to remove the cursor after animation is done i can i do that

  • @blue_berry_pie64
    @blue_berry_pie64 2 ปีที่แล้ว

    Could I ask, why we choose steps(4)?

  • @coopinloop3037
    @coopinloop3037 3 ปีที่แล้ว

    Bro pls reply, how can I do this having a background image?

  • @samuelfrank9947
    @samuelfrank9947 3 ปีที่แล้ว

    Lit💥

    • @GamingTSH
      @GamingTSH 3 ปีที่แล้ว

      Programming By TSH --- This channel is so good too

  • @bhargavvvv
    @bhargavvvv 3 ปีที่แล้ว

    How to make this effect responsive for the websites

  • @aogunnaike
    @aogunnaike 3 ปีที่แล้ว +1

    Lovely

  • @ChagoME
    @ChagoME 3 ปีที่แล้ว

    I am wondering how to do this with multiple lines, where each row has a different li color as follows:
    Line1: blue animation
    Line2: gold animation
    ...

    • @jonprumeier9900
      @jonprumeier9900 3 ปีที่แล้ว

      You would have to give each list item in the HTML file an individual class or ID and then you can adress the list item individually through the CSS. Since there is already a proper format with the class solution, it is preferable to use IDs instead of classes, because it is more common to design specific single elements with IDs and it overrides the properties that are specified in the class. I hope my answer can help you! :)

    • @ChagoME
      @ChagoME 3 ปีที่แล้ว

      @@jonprumeier9900 thanks a lot))

    • @GamingTSH
      @GamingTSH 3 ปีที่แล้ว

      Programming By TSH --- This channel is so good too

  • @NiketBahety
    @NiketBahety 3 ปีที่แล้ว

    How to give a little pause after each word

  • @gamekills8865
    @gamekills8865 ปีที่แล้ว

    Is it gonna work for new line?

  • @user-sk9kl9bn1r
    @user-sk9kl9bn1r 3 ปีที่แล้ว +1

    Great :)