Awesome Cursor Animation With CSS & Javascript!

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

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

  • @mysterOrel7924
    @mysterOrel7924 4 ปีที่แล้ว +174

    Ed i laughed so much when you kicked the cursor lmao

    • @anjumayoub9077
      @anjumayoub9077 4 ปีที่แล้ว +6

      that kick was awesome LOL 😂

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

      same. I didn't expect to laugh though.

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

      Same 😬😂

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

      This is one of those things that make you look stupid if you show them to someone, but are extremely funny

    • @onlyforyou9999
      @onlyforyou9999 4 ปีที่แล้ว

      Yes mee too bro😁😁😂😂😂

  • @dawidepl7807
    @dawidepl7807 4 ปีที่แล้ว +119

    When it take you 3 hours to make working cool looking navbar, and then you see guy making better in 2 minutes...

    • @nglx5846
      @nglx5846 4 ปีที่แล้ว +8

      This comment made me laugh a lot but at the same time it hurted me HAHAHA

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

      @@nglx5846 LMAO

    • @danielhughes3758
      @danielhughes3758 4 ปีที่แล้ว +16

      Nothing wrong with that. Everything in programming takes much longer to learn than it does to implement once you really know it.
      I'm pretty certain it took him longer than 3 hours to get to this level with CSS 😉

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

      @@danielhughes3758 Hah, true. For now I have big problems with designing :/

    • @HamzaKhan-qm5bl
      @HamzaKhan-qm5bl 4 ปีที่แล้ว +2

      Ed has already admitted that he designs or works on his video cintent before shooting so defunitely he did not dk it in 2 mins. No one can if you don't have a planned design.

  • @tobhuse
    @tobhuse 4 ปีที่แล้ว +25

    Yess!! As a CS student you are my main source of learing new and cool stuff for my projects! Thank you!

    • @manuxgp
      @manuxgp 4 ปีที่แล้ว

      same :)

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

      I also like CS, my favorite is CS:GO

    • @manannaik1341
      @manannaik1341 4 ปีที่แล้ว

      @@uontap I love R6S

    • @sudhamajayanthi
      @sudhamajayanthi 4 ปีที่แล้ว

      @Unique Bacon Soldier This is a joke

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

    You never fail to inject your viewers with your humor!
    Best greetings ever!

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

    i'm actually obsessed with your videos thank you

  • @AccessCode101
    @AccessCode101 4 ปีที่แล้ว +16

    14:37 "Ok, let's calm down everybody."

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

      ..we need to focus🤣🤣

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

    You are just really amazing, I love your character and your tutorials are based on trendy websites which were what I needed for my assignment. I'm actually basing myself on 5 of your tutorials. I'm so glad to have found you.

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

    I can't wait for your JavaScript courses mate! Your content is top notch - much love from Australia!

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

    This looks really awesome! I will try to recreate this

  • @infosandfacts7536
    @infosandfacts7536 4 ปีที่แล้ว +6

    The music let’s me feel I am in a mega cool bar - chilling 😛

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

    Your channel is the MTV of programming youtubers!

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

    I was always wondered how this effect is made. Now I know that it's really easy.

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

    Thanks, Ed. This is brilliant. Subscribed!

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

    Bro I see your all videos, and some of them repeatedly. You always put smile on my face. You made me a web dev. but still I am in the process to achieve your's level.
    Love from India ❤️

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

    Just wanted to say that you're really amazing for sharing all our your great knowledge.
    In addition, for having a really good sense of humor to top it all off.
    In the future, when I get the chance to support you, I will! Hope you have a great day :)

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

    I cannot wait to buy your JavaScript course

    •  4 ปีที่แล้ว +1

      Especially that it doesn't work.

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

    Your are a great teacher that keeps the experience entertaining but very informative. Thank you

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

    0:19 I did not expect that xDDDDDD

  • @peternicholson26
    @peternicholson26 4 ปีที่แล้ว

    This is excellent timing for a project I've got on at work. Champion

  • @samanthkumar1332
    @samanthkumar1332 4 ปีที่แล้ว

    your tutorial keeps me boosted! thank you @Dev Ed

  • @cerealrakist7360
    @cerealrakist7360 4 ปีที่แล้ว

    Dude you are so awesome!! Best personality I have ever watched!

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

    Dude your the best! You're funny, professional, and you just fkn rock. Keep going bro!!!!

  • @dequan300
    @dequan300 4 ปีที่แล้ว

    Can't wait for the courses

  • @heipadegdingamlesei
    @heipadegdingamlesei 4 ปีที่แล้ว

    hahah finally a web dev that makes a tutorial enjoyable! way to go ed I was laughing so much at the sponsor joke

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

    I love you and I love this tutorial. With that said, when implementing and customizing this I found an interesting bug: if you have a site with multiple sections and so on, the custom cursor on scrolling will go up and down like crazy. While this is fun, it is not very useful. To fix this:
    1. On css, change position: absolute to position: fixed;
    2. on js: change e.pageX and e.pageY to e.clientX and e.clientY.
    That should do it.

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

      Thanks. Why are you like the only person who noticed this? Lol I went to the comments expecting more and had to search through them.

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

      @@rohitb23 anytime!

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

      Thank You soo much man!

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

    the opening killed me 🤣🤣🤣🤣🤣🤣🤣🤣warap with the cursor

  • @salekinrupak7055
    @salekinrupak7055 4 ปีที่แล้ว

    Can't wait for your Js course Ed! 😍

  • @MLGRicky
    @MLGRicky 4 ปีที่แล้ว

    bro the squarespace ad had me dying! xD

  • @separatetraveler8226
    @separatetraveler8226 4 ปีที่แล้ว

    It's really cool !!
    Thanks Dev Ed
    .

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

    I've worked on something similar recently. But I added position "fixed" to the tracking block at the top left corner. Then I changed transform-translate on "mousemove" with JS. I read somewhere on Stack overflow that it's better to change transform properties instead of top & left for the smooth transition effect. I used e.pageX and e.pageY as well but I got problems with transform on Y-axis on page scroll, so I had to change it to e.clientX and e.clientY. So the line of code looked like this: /* let translation = "translate(" + e.clientX + "px, " + (e.clientY + document.body.scrollTop) + "px)"; item.style.transform = translation; */ I am not sure if I've done it right but it works fine too :)

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

    Thank you so much !! I was trying since this morning 😅

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

    I didn't know that we can use negative z-index!
    Btw helpful video👍

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

    i spit my water when Ed kicked the cursor HAHA

  • @vskand
    @vskand 4 ปีที่แล้ว

    Appreciated the tutorial, appreciated Brock Berrigan.

  • @DavidElstob73
    @DavidElstob73 4 ปีที่แล้ว

    Super cool tutorial, Ed. Add the cursor: pointer back on the hovered-links and it looks nice! :)

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

    Best tutorials ever!. Ed, when you will make a Pyhon course, designed for total beginners? For sure I will buy it, because your teaching style is awsome.. :)

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

    Thank you so much for this awesome and fun course!

  • @aparalyzedconch
    @aparalyzedconch 4 ปีที่แล้ว

    XD Why is your desktop so clean, I'm jealous. Your tutorials rock by the way.

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

    i really love your videos i always learn so much so thank you :)

  • @seemasaharan9461
    @seemasaharan9461 4 ปีที่แล้ว

    My favourite tech TH-camr.

  • @7ollock
    @7ollock 4 ปีที่แล้ว

    DevEd for president

  • @Stoney_Eagle
    @Stoney_Eagle 4 ปีที่แล้ว

    Your openings crack me up every time 😂

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

    Dude you are amazing !

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

    Clicked like for that amazing intro!

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

    I swear to GOD your soooo good i just click on your videos becuase I like your personality your amazing please never ever stop uploading plz

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

      same here. I even watch videos that dont even concern me. Best TH-camr out there 100%. Dev Ed> pewdiepie

  • @DariaBrinza-w7u
    @DariaBrinza-w7u 4 ปีที่แล้ว

    When you watch exactly what you searched for and hear on the background the remixed song from your favourite movie. That's sooo good, lol

  • @NikhilAdiga
    @NikhilAdiga 4 ปีที่แล้ว

    I lost it at that kick😂😂😂

  • @jaredzuniga827
    @jaredzuniga827 4 ปีที่แล้ว

    Love your tutorials!

  • @manuxgp
    @manuxgp 4 ปีที่แล้ว

    I love your videos man! Thank you so much

  • @4MXW
    @4MXW 2 ปีที่แล้ว

    14:47 so it changes to white, but this kind of blocks it...
    I died.
    Was so good after the "omg let's calm down everybody".

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

    Perfect. You are amazing.

  • @telugucartoonsworld2565
    @telugucartoonsworld2565 4 ปีที่แล้ว

    This is the only website of yours that i can do without seeing your video.

  • @anjumayoub9077
    @anjumayoub9077 4 ปีที่แล้ว

    really excited for JavaScript 🔥😍

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

    That was Amazing,

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

    Like mentioned previously by others, you made an efficient navbar. Do you have a navbar which is responsive with minimal code as all responsive navbars require long codes

  • @dado9873
    @dado9873 4 ปีที่แล้ว

    Thanks Ed for awesome video.

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

    Thanks, helped a lot !

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

    we need a javascript course. I have your html and css course, and I've watched it. now, we need a JS course ASAP

    • @developedbyed
      @developedbyed  4 ปีที่แล้ว

      Working on it 😀

    • @developedbynick
      @developedbynick 4 ปีที่แล้ว

      @@developedbyed Thanks for reading Dev. It's an honour

  • @reedbarber
    @reedbarber 4 ปีที่แล้ว

    Ed, You're the Golden Child of WebDev. Awsome personality to boot! BTW, what Screen Recording software do you use? *Peace!

  • @0bbie610
    @0bbie610 4 ปีที่แล้ว

    Also. I'd probly just buy your javascript course because you're awesome. And very knowledgable

  • @eng-ammaralsaiary545
    @eng-ammaralsaiary545 3 ปีที่แล้ว

    I designed an entire cuberto website and it took me a whole month of continuous work at a rate of 9 hours per day

  • @will2r
    @will2r 4 ปีที่แล้ว

    ed u are god tier

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

    Instead of making items in nav turning their color to white you could just use backdrop filter to invert. Imho that would be cooler and wouldn't make longer text disappear. Cool nonetheless

    • @4MXW
      @4MXW 2 ปีที่แล้ว

      thx u sir

  • @brigittavarga5525
    @brigittavarga5525 4 ปีที่แล้ว

    Thank you so much for this! It‘s really helpful (and fun) :-)

  • @jumaelahmed9995
    @jumaelahmed9995 4 ปีที่แล้ว

    you are my fav dev Ed,❤️

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

    love your personality! hahaha

  • @the_awakening_msaha5132
    @the_awakening_msaha5132 4 ปีที่แล้ว

    1000 views in just 27 minutes... Yes I check yt notifications everyday for your latest videos. #my_gorgeous_teacher_on_the_internet

  • @lilykustova6359
    @lilykustova6359 4 ปีที่แล้ว

    Great video! Thanks a lot!

  • @vanschependom
    @vanschependom 4 ปีที่แล้ว

    How do you copy the lines on 1:31?

  • @SAAARC
    @SAAARC 4 ปีที่แล้ว

    Good content my man

  • @SvetaSveta-ms4hi
    @SvetaSveta-ms4hi 4 ปีที่แล้ว

    Thanks a billion. You're amazing. Be happy 😍

  • @mdjamilkashemporosh
    @mdjamilkashemporosh 4 ปีที่แล้ว

    what a shot man

  • @darkcodelab
    @darkcodelab 4 ปีที่แล้ว

    Legends say that it is not easy to get a heart from Dev Ed.

  • @psychologyfactstothinkabout
    @psychologyfactstothinkabout 4 ปีที่แล้ว

    Make a loading icon so like the border of the icon is moving with blue like how google sign in has the blue thing moving, add that around the icon or a part of the icon shows the page is loading or doing something

  • @DEEPAKKUMAR-xe2vb
    @DEEPAKKUMAR-xe2vb 4 ปีที่แล้ว +1

    Waiting for blender 😍🔥

  • @bongamene3087
    @bongamene3087 4 ปีที่แล้ว

    I actually love you!

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

    wtf you made me laugh from no where you genius thank you for your mom and dad

  • @SwarupKumarKuila
    @SwarupKumarKuila 4 ปีที่แล้ว

    I am from India , I love your Chanel,
    I learn many things from you , thank you soo much.

  • @sudheeps3584
    @sudheeps3584 4 ปีที่แล้ว

    maaan!!!! ur amazing .. big fan of urs .. learnt most of my coding from ur channel ... keep on it doing ... also do a MERN stack video :P

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

    You are great, thanks for sharing!!

  • @AshishNallana
    @AshishNallana 4 ปีที่แล้ว

    Ed ... ❤️ I love the fun you make in between the videos😀😀😀😀

  • @mihailodukic601
    @mihailodukic601 4 ปีที่แล้ว

    Sup Ed the amazing Dev from Romania . Love from Serbia !!!

  • @ericchow7016
    @ericchow7016 4 ปีที่แล้ว

    Hi Ed, great videos! Subscribed. One question tho, wondering about the practicality of this cursor animation - i insert an a-tag to the nav links and i can't click them.

  • @untildawn5714
    @untildawn5714 4 ปีที่แล้ว

    nice kick! never seen someone kicks a cursor :D

  • @hamzanasri9414
    @hamzanasri9414 4 ปีที่แล้ว

    YOU ARE SO FUNNYYY, AND A VERY GOOD TEACHER!!!!

  • @biswajitmondal4263
    @biswajitmondal4263 4 ปีที่แล้ว

    Please make a full detailed and exciting javascript and its frameworks i.e angular, react courses like html css.... i am very excited after joining this course

  • @gabrielalejandromartinezla327
    @gabrielalejandromartinezla327 4 ปีที่แล้ว

    How you learn or create this amazing stuffs!! Ed you're a great dev youtuber haha

  • @bobbychicano
    @bobbychicano 4 ปีที่แล้ว

    LMFAO when you kicked the cursor

  • @hakurubappa9923
    @hakurubappa9923 4 ปีที่แล้ว

    Pewdiepie of programming

  • @Mushu.D
    @Mushu.D 4 ปีที่แล้ว

    That kick got me rolling hahahahah

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

    This is awesome, but when implemented it's really laggy when scrolling down a page (Chrome) any fix for that?

    • @nigelmoyes9798
      @nigelmoyes9798 4 ปีที่แล้ว

      If you use clientX and clientY instead of pageX and pageY, the cursor will behave as expected.

    • @4MXW
      @4MXW 2 ปีที่แล้ว

      Also what I needed to add was a box-shadow. So I don't see the "pixelated" kind of laggy border when I move the mouse too fast.

  • @pf98
    @pf98 4 ปีที่แล้ว

    Love you man...Thanks

  • @taylortoast2
    @taylortoast2 4 ปีที่แล้ว

    Very cool!

  • @anon89461
    @anon89461 4 ปีที่แล้ว

    THANKS, DEV WEED.

  • @Mahmoud-cn8il
    @Mahmoud-cn8il 4 ปีที่แล้ว +1

    Thank you so much ^_^

  • @anjalibansal2726
    @anjalibansal2726 4 ปีที่แล้ว

    great tutorial! :)

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

    Cursor: none; is not working on hovering over links and buttons. Please tell How to solve it?

  • @helentorok8592
    @helentorok8592 4 ปีที่แล้ว

    You are awesome!! Thank you very much

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

    From where did you get the Wi-Fi lamp ? ( Lavinia Simo ) 😃

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

    Rip Cursor, Now Ed will be known as the cursor tormentor LOL!!! :) But I like it!