Creating Custom Cursors - CSS Only, and JavaScript!

Today's Question: Customizing the cursor, yes or no? Tell me why in the comments.
-- Today, we're going to take a look at a variety of ways to customize the mouse cursor. First, we'll look at a CSS only solution, and then we'll get into a little bit of JavaScript to create more interesting mouse cursors -- fully equipped with cursor animations, click-based animations and more!

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[bruneltommy]

For scrolling page
css: transform: translate(-50%, -50%);position: fixed;
js: cursor.setAttribute("style", "top: "+(e.pageY - scrollY)+"px; left: "+(e.pageX)+"px")

[matther]

Hey Gary, great video. I really liked the animations there. One thing worth mentioning is that your implementation doesn't look like it takes into consideration that the cursor is always in the way of what you would be trying to click on like a link or something. Setting "pointer-events" to "none" on .cursor allows the cursor to be clicked through and would fix that issue.

[premkumarh]

It's midnight in India and I was prototyping my portfolio. Seems like I need to add this too I ain't gonna over do my website but I'm gonna add it for sure.. Loved it♥️

[juujuu]

Cool. Just fyi, did not finish watching but have checked the codepen and I think it could be better.
1. change cursor position: absolute -> fixed
2. replace pageX / pageY with clientX / client Y
Then it will act as a real cursor without moving during scrolling.

[arthurprather]

Customizing the cursor, yes or no?

For personal websites or portfolio sure why not. But for business, e-commerce, or professional websites, bad idea!

[kcblackbyrn]

Thank you for this tutorial. I feel like I learned something because you were saying what you were doing and giving clear instructions. I'm not a fan of just copying directions with those silent tutorials so it was a relief to find your video. Thanks!

[AshishKumar-zigy]

really needed this one, was trying to figure it our with jquery coz i am handy with that.... love this one <3

[nparashar]

Yess why not ? It looks so cool like you can see the idea of custom cursor adapted by some Devs in so cool way

[jaken]

I loved the tutorial. Has far as the question of customizing the cursor, my answer is that it depends on what you are doing. For instance, I may be developing a site for musicians. I can make the cursor into a note. Or, if I am working on a patriotic type of site, I can turn it into a flag. I see endless possibilities.

[babybabloo]

Vừa vào đã nổi cả da gà 藍giọng a Phúc hayyy quá, mong sẽ tiếp tục cover ạ ❤️

[DesignCourse]

Enjoy? Sub up! My answer for today's question: I think as long as it's kept *minimal*, and ideally still keeps the original cursor pointer around, it can work. It all depends on the context/purpose. You?

[chethanjm]

Chỉ cần Đức Phúc hát ballad thì dù buồn hay vui ĐP cũng truyền tải cảm xúc của bài hát rất tốt. Bài buồn thì nghe đúng kiểu tự sự, đau khổ, nghe là muốn khóc. Còn bài vui thì lại nhẹ nhàng, ấm áp, chân thành nghe là muốn yêu❤️

[LHM]

Bro look so much like the protagonist of fight club. No wonder why you could produce such great content!

[pankajjaiswal]

I saw many custom cursor tutorials yet end my search at your channel again.

[human_error]

To centre the custom cursor to the default browser mouse you can get the absolute center by simply adding "transform: translate(-50%, -50%);" to the custom cursor css without doing any maths in the JS 👍

[hongcai]

very useful! I used it to create a photo frame design. I like your efficient code, no one line wasted

[razenkellesly]

Man YOU ARE SUPER HERO bring more creative tutorials, what about line animation ?

[mshimanshu]

You deserve more than a million likes man !!!!

[RandomVideosEveryDay]

Sugg: please use transformY and transformX instead top and left for smooth performance.
Note* If using transform replace pageX and pageY to clientX and clientY.

[gauravborra]

Hi Gary, whenever i am searching how to video, next day you magically make video of that.

Can you make video on preloading and prefetch contents of a website ??

Anyways you are posting awesome stuff that i once think and say "how to do that" and now i am doing that.
Thanks a TON for your videos