Animated Circle Text Logo Effects using CSS & Javascript

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 ก.ย. 2024

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

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

    This is awesome! I def didn’t know about the transform-origin property, I just got some many ideas watching this! Thank you!

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

    Thank You I like Ur work!!
    Little upgrade:
    When U count the long of the text
    // const textLong = text.innerText.length //
    u can set the rotate automatic
    // `${char}` ""

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

    Your tutorials are topnotch and a great motivation to people like us who are complete beginners. From Kenya - East Africa.

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

    بہت خوب آپ نے بہت اچھی چیزیں بنائی ہیں۔

  • @Ganesh-ld8ph
    @Ganesh-ld8ph 3 ปีที่แล้ว +7

    Wonderful bro, you are the Code Wizard 🧙‍♂️

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

    i think that it's better if you explain what you re doing, because a person like me, that doesn't know these javscript stuff with your help maybe can understund. Anyway the video is very cool.

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

      Totally agree with you

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

      If you are so lazy that don't tryna learn "js stuff", then I don't think that You need to know what's goin on here. There's a lot of good and free information on TH-cam about css, js, scss etc. But people who really need videos like this one don't need to waste any extra time for the basic things they already know.

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

      Better try canava app bro

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

      @@kishoreb8163 I think I did not understand

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

      These tutorials are made towards intermediates. Once you learn the fundamentals of js and how to manipulate the DOM, it will make more sense

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

    Yeah cool but what's that background music you're using? Reminds me of 'River flows in you'.

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

    Thanks man! Very good job!

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

    First comment bhai big fan of you

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

    I don't didn't know about transform-origin, tnx a lot for your work! : )

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

    Nice work Sir

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

    You are amazing, it s always a pleasure to watch you working and do the same thing like you ! Thank you so much 😘

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

    You. surprise. me. every. day.

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

    ❤ you are the best animation magician ❤

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

    More creative channel ever

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

    Irshad bhai doing animated logo👌... Here I am stuck in responsiveness which is decreasing my motivation! 😒

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

    I always wanted to make one of these.. thanks.

  • @Abdullah-sk2df
    @Abdullah-sk2df 2 หลายเดือนก่อน

    Thanks

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

    Amazing content brother, keep going

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

    This is extraordinary hats off to you

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

    Nice, really nice.

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

    Thanks! Muhhamad, are you still doing design or frontend development?

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

    Tankyou so mucho
    great Tutorial

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

    My text animation on circle isn't working can someone help me ??!

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

    Very cool! But it looks like the transform:rotate has to be tweaked for every single name if different from the original. No? Forgive me, I’m still learning.

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

    perfeito mano parabéns

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

    Marvellous

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

    the angle is (360 / chars.length)

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

    The span tag of script is not working.... help me plz!

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

    Great tutorial thanks a lot 💯💯💪🙏

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

    Superb

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

    Thank you this is amazing

  • @iodine-ff-kingmano
    @iodine-ff-kingmano ปีที่แล้ว

    Awesome......

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

    Excellent!

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

    cool

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

    beautiful !!!!

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

    great one keep it up

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

    can i copy this code from somewhere

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

    Awesome 👍👍👍👍

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

    top!!!! incrible!

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

    Awesome!

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

    👏👏👏 nunca para de sorprender. 👍😉

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

    Amazing 😍

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

    Hello to you, thank you for your videos.
    i have tried to reproduce but it does not work correctly. the letters move away from each other....I ; French !

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

    Thanks a lot

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

    You're capo!

  • @JJ-zv6yn
    @JJ-zv6yn 2 ปีที่แล้ว

    Sir how to increase that image size . it is too small for my image to see . so i want to increase my font , image . please tell mes ir

  • @user-sc1uc7mh3p
    @user-sc1uc7mh3p 2 ปีที่แล้ว

    감사합니다 ㅠㅠ

  • @kyron6024
    @kyron6024 2 หลายเดือนก่อน

    anyone know how could i do these but in react?

  • @22chetandhangar79
    @22chetandhangar79 3 ปีที่แล้ว

    Can lighting effects on image

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

    It will be much better to explain us what you code .Try to explain by speaking if it possible anyday .Love from 🇧🇩.

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

    Genial

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

    Is this responsive?

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

    Text online mixed not the same Text .....=????

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

    Somehow this did not work for me 😢 got stuck at the map () . Join method

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

    But I could not make multiple letter, plz help me ex:-(DATA SCIENCE CYBERSECURITY CLOUD ENgiNEERING AI/INTELLIGENT SYSTEMS E-MECHATRONICS/COMPUTER ENGINEERING E-BUSINESS DIGITAL MARKETING VR/AR dIGITAL LEADERSHIP/DIGITAL TRANSFORMATION FINTECH MOBILE TECHNOLOGY/TELECOMMUNICATION")

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

    It's showing error in text.innerText part, please provide a solution for that.

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

    What is the name of the song in the background?

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

    Bro,
    I am from Bangladesh,
    So how i pay u for source code?

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

    Cool… I still need words thanks…

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

    Bro may I know the name of the compiler please 😊

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

    Koi HTML and CSS ke extensions btado VS Code ke lia jo use ma aye...Plzz

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

    there one problem the letter attached and showing on letter only plz solution

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

    Sir plz make a playlist 4 js

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

    Can you do this in React?

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

      do you know how >

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

      @@orionprax7878 getting back into react I’ll figure it out

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

    what is this chatacter that you put in 4:34?? i put ' or " put it just prints "${char}"

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

      Both are wrong....Use this `

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

      @@OnlineTutorialsYT thank u

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

    Wow 💖💖

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

    😍😍

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

    Dude your age?

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

    source code please

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

    why split ???

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

      Because it’s easier than writing a span for each character

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

    Muhammad, Can you please give me the images download link please.

  • @prasanth-pk12
    @prasanth-pk12 3 ปีที่แล้ว

    Bro img not showing for me please help me ...

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

      Follow the code and check your image type is png/jpg/gif

    • @prasanth-pk12
      @prasanth-pk12 3 ปีที่แล้ว

      Thank you bro

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

    Bhaiya face reveal karo

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

    I don't know javascript......!☹️😟😂😍

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

    That's not you

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

    Pls reply.

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

    Assalamualikum wa rohmatullahi wa barkatuh. I am show regular your video. but vaia the music background is the "HARAM" for our muslim religion. please vaia add "Halal" music. I learn much more your video. Thanks Vaia

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

    No need of this much bro just create svg and fill it with text give ti animation thats it🤌

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

    Amazing!