Cursor Animation Effects | On Mousemove, Mouseout & Mouse Stopped - Using HTML, CSS & Javascript

Поділитися
Вставка
  • Опубліковано 18 лис 2024

КОМЕНТАРІ • 64

  • @__fiamy
    @__fiamy 3 роки тому +25

    hi! i was having a problem when I scroll my page or when i go on a link ('a') so in script:
    document.addEventListener("mousemove", (e) => {
    let x = e.clientX; //replace pageX for clientX
    let y = e.clientY; // replace pageY for clientY
    }
    and with this i solve the problem
    perdon por mi ingles a quien tenga el mismo problema que tuve con el scroll y el mouse espero le sirva, ya que lo que no tomaba era la posición del mouse al interactuar con la pagina, suerte!!

    • @CodingSnow
      @CodingSnow  3 роки тому +1

      Great Work!

    • @אילוןמעיין
      @אילוןמעיין 2 роки тому +1

      Thanks it helped me too :)

    • @ookuna6542
      @ookuna6542 2 роки тому +1

      thank you, is very helpfull

    • @divyankk2965
      @divyankk2965 2 роки тому

      hey i have a problem when i try to scroll the animation stay at the top and when i get back to top it act normal(follow the mouse pointer)

    • @Nature_with_
      @Nature_with_ 2 роки тому

      i like your effort, great work

  • @thewantedmancity
    @thewantedmancity 3 роки тому +4

    thanks for continuing to make this type of content

  • @seeker3686
    @seeker3686 3 роки тому +2

    No words to say...perfect🤩

  • @anushka149
    @anushka149 8 місяців тому +1

    learned so much. thanks!

  • @empowercode
    @empowercode 3 роки тому +3

    Hey Coding Snow, nice to meet you! I just found your channel and subscribed, love what you're doing!
    I like how clear and detailed your explanations are as well as the depth of knowledge you have surrounding the topic! Since I run a tech education channel as well, I love to see fellow Content Creators sharing, educating, and inspiring a large global audience. I wish you the best of luck on your UA-cam Journey, can't wait to see you succeed! Your content really stands out and you've put so much thought into your videos!
    Cheers, happy holidays, and keep up the great work!

    • @CodingSnow
      @CodingSnow  3 роки тому +1

      Hey, This is so great to hear! you really made my day ❤ Cheers!

    • @datascience3008
      @datascience3008 Рік тому

      hi bot

  • @samuelk1623
    @samuelk1623 3 роки тому

    Wow...Good job..Always perfect 👌

  • @jiwonkim618
    @jiwonkim618 Рік тому

    Amazing ! Thank you so much!!!!!!!

  • @reecebygrave7211
    @reecebygrave7211 Рік тому

    amazing thank you!

  • @afrozcollection5457
    @afrozcollection5457 2 роки тому

    thanks it helpful for me....☺

  • @rudisnyder1981
    @rudisnyder1981 3 роки тому

    I really liked this and I actually learned something thanks for the video I enjoyed it 👌

    • @CodingSnow
      @CodingSnow  3 роки тому +1

      Glad it was helpful!

    • @rudisnyder1981
      @rudisnyder1981 3 роки тому +1

      Thanks keep up the good work

    • @CodingSnow
      @CodingSnow  3 роки тому

      @@rudisnyder1981 Thank you! ❤ Will do!

  • @אילוןמעיין
    @אילוןמעיין 2 роки тому

    Thank you :)

  • @trxlly
    @trxlly Рік тому +1

    Thanksss

  • @AnimeThings_
    @AnimeThings_ 3 роки тому +1

    Awesome bro but waiting for a long time I think you upload video on my request which that blast effects.😓

    • @CodingSnow
      @CodingSnow  3 роки тому +1

      Thank you bro ❤
      Didn't forget, Working on it. I will upload it soon.

    • @AnimeThings_
      @AnimeThings_ 3 роки тому

      Thank god! Please upload soon as possible

  • @bishalsenhdri7655
    @bishalsenhdri7655 3 роки тому

    Lit 🔥🔥

  • @Mehedihasan-nt5zk
    @Mehedihasan-nt5zk 3 роки тому

    Keep up it bro.❤

  • @monishp168
    @monishp168 3 роки тому

    I owe you a lot

  • @burgasHoH
    @burgasHoH 3 роки тому

    Cool video

  • @pankajnaik1069
    @pankajnaik1069 3 роки тому

    Hi...great video !! I have a silly doubt.. Can u plz tell why do we use clearTimeout() here. Without this also it works fine.

    • @CodingSnow
      @CodingSnow  3 роки тому +1

      It is for hide the cursor animation when mouse move stopped. clearTimeout() is for reset the timeout variable to again run the same 1000 milliseconds when mouse stopped again.
      Simply it is for keep the 1000ms gap everytime to hide the cursor animation when mouse move stopped.

  • @lizar7521
    @lizar7521 2 роки тому +1

    My cursor still doesn't move after inputing
    position: fixed;
    It suddenly stays at the top left corner. possible errors/solutions?

    • @insanequeen6676
      @insanequeen6676 Рік тому

      mine too, I also needs some solution. I am frustrated.

  • @anamshafiq640
    @anamshafiq640 3 роки тому +2

    i have a problem my cursor is not work on all links

    • @ahmadbadran6524
      @ahmadbadran6524 2 роки тому

      z-index: 999;
      pointer-events: none;
      ---------------------------------------------
      Make sure these styles is in your code.

  • @AfricaTimeMachine
    @AfricaTimeMachine Рік тому

    Can we do this in WordPress

  • @anshut-rex6522
    @anshut-rex6522 3 роки тому

    Nice video
    🔥🔥🔥🔥
    In which year start coding
    Where are u live bro

    • @CodingSnow
      @CodingSnow  3 роки тому

      Thank you ❤
      A few years now,
      I am a Srilankan. Currently, I live in Australia.

    • @anshut-rex6522
      @anshut-rex6522 3 роки тому

      @@CodingSnow
      Plzz make portfolio website

    • @CodingSnow
      @CodingSnow  3 роки тому

      @@anshut-rex6522 Okay..Stay tuned.

    • @anshut-rex6522
      @anshut-rex6522 3 роки тому

      @@CodingSnow
      Ok bro 🔥🔥

  • @dingadanga8653
    @dingadanga8653 Рік тому

    How can I apply this to a wordpress website?

  • @swrnymx7
    @swrnymx7 Рік тому

    i made one for my website but i want it to hide in mobile phones is there any way to do so?

    • @21BCS022Ishan
      @21BCS022Ishan 9 місяців тому

      use media query to allow the animation only above certain screen width and it will work for sure

  • @adiansyahputra774
    @adiansyahputra774 3 роки тому

    👍👍👍

  • @muthassimbilla
    @muthassimbilla Рік тому

    The cursor passes below the side bar. . How to fix this!!

  • @samuellamichhane4368
    @samuellamichhane4368 7 місяців тому

    when I scroll it does not follow the mouse

    • @CodingSnow
      @CodingSnow  7 місяців тому

      Read the pinned comment. You'll get the solution. 😊

  • @affnaan3178
    @affnaan3178 3 роки тому

    hey can i use your source code in my website plz

  • @anamshafiq640
    @anamshafiq640 3 роки тому +1

    can anybody help me

  • @gpofficial4574
    @gpofficial4574 3 роки тому

    Hi

  • @flierfg1098
    @flierfg1098 Рік тому

    Курсор работает хорошо но из за этого минуса дизлайк объясняю в чём проблема при вёрстке этого курсора проблем не будет но при большой страницы при прокрутки сам курсор будет уходить вниз за экран так что я считаю что это не доработка 😐🤔

    • @dails6211
      @dails6211 Рік тому

      clientX и clientY можешь использовать

  • @namdao6963
    @namdao6963 2 роки тому

    Ferpect