Creating Custom Cursors - CSS Only, and JavaScript!

preview_player
Показать описание
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!
Рекомендации по теме
Комментарии
Автор

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

bruneltommy
Автор

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.

matther
Автор

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♥️

premkumarh
Автор

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.

juujuu
Автор

Customizing the cursor, yes or no?

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

arthurprather
Автор

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!

kcblackbyrn
Автор

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

AshishKumar-zigy
Автор

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

nparashar
Автор

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.

jaken
Автор

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

babybabloo
Автор

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?

DesignCourse
Автор

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❤️

chethanjm
Автор

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

LHM
Автор

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

pankajjaiswal
Автор

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 👍

human_error
Автор

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

hongcai
Автор

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

razenkellesly
Автор

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

mshimanshu
Автор

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.

RandomVideosEveryDay
Автор

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

gauravborra
join shbcf.ru