Pure luck we have you here. I just randomly checked comments a while after I put back my cursor project from my portfolio site since cursor leaves the hooked div while scrolling, then updated again when the cursor is moved. Caused div element to jump to the cursor after scroll. :/ So thanks :D
@@sunkarasridhar3885 You need to substract half the height and half the width to your attribute (e.pageY - scrollY - Z), Z being half the height of your cursor
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.
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?
I'd say no to custom cursors, being from the times of downloadable cursors it just brings back bad memories. I think the only time it would be good is a browser game like an old style rpg
I say yes to customizing cursor! But it all does depend on the context. I'd want to (probably just for a personal project), maybe create a better svg of the original cursor (designed *for* the context) . And then give it some subtle transitions with minimal animations. Especially on something like all navigation elements. This would be to completely replace the original cursor, ofcourse. I mean, the more I think about it, the more the possibilities. Thank you for this introduction. #SweeetIndeed 17:48 🙌🏼
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♥️
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!
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.
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.
This may have a problem, when the user removes his cursor from the browser window the cursor stays at the edge...what can be the the solution to remove this issue ... Can we use the mouseout event in js
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
@@christianachleitner9439 Every pages have purpose or expectation for visitors. The goal for developers is to build a site that will get visitor to comeback and visit site again or refer other visitors to visit that site in the future so site can grow. If developer fail to meet expectation, then the site would become useless. For example, over animated page that require loading time, would turn off for most visitors who want to seek for quick information. I would recommend read good books - "Don't make me think" and "Design Everyday things". This will put better perceptive for most front-end designers/developers.
@Hoyt Volker Well, in my opinion, if it perfectly fits the aesthetic of the website, it is professional and it gives a unique experience/feeling, it is very good and worth it.
Hay this video is very exciting ! but I have single line on canvas and I want to change cursor to pointer as I hover over that line only. How can I achieve that?
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 👍
Thanks for the idea. I did this but got a problem, when I try to hover a div or click a div, the mouse pointer div comes in between so how to solve this problem. please help me.
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❤️
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.
I created the cursor animation but now, the animation doesn't allow me to interact with my website components like the links and buttons. I also tried to change pointer-events to auto. Still no luck. The only fix I could arrive was is by letting the z-index stay at 0. Keeping it at 0 defeats the whole purpose of the cursor because it ends up hiding behind the dropdown menu and images. What am I doing wrong?
In this implementation I'd say no, with different cursors that are context aware (like telling where to swipe, scroll or a call to action like buy or contact), yes. I think it would be possible to create such a thing from this, but since i'm not that good with javascript I'd have to try around a little bit to find out.
Hi Gary, I thank you for the intersting lecture about customizing cursor. it was precise and very interesting. I have a question though. I wan to create a big crosshair which moves with mouse move, except that this crosshair is as big as my display window in the .html file. then i want the horizontal and vertical lines of the cross hair be the size of my display window. i also want the horizontal and vertical arms of crosshair move vertically and horizontally as i move curser up/down and left/right on the window. i also want to add a square in crossing point of this big crosshair and move on an image and capture a piece of the image for measurement of a physical phenomenan, do you have any idea how to go around this? thank in advance.🙏
Will that really work to click links on the page tho? Since there is a div between the link and the actual cursor.... Anyway, If anyone have used this method for their site and noticed this problem it can be solved with pointer-events:none; in css. That allows you to click through a div
Hi Gary, is it possible to change the cursor but not to the entire , but just a div for example, so i can use multiples cursor in different places for example ? How would you do that to choose a class div with your code?
wow this is so good! How can I make the hover effect? when hovering over an object and doing an effect on hover I would appreciate if you help me bye friend
hey! i was making a whiteboard projecct i want the cursor to look like prncil when i select pencil , etc please teell me how can i do it............. '
When i scroll down page with middle mouse button or press buttons on header, page scrolling down as it's supposed to be, but that custom cursor stays where it is until i move again mouse. So above or under sections. I used codes from codepen. What is the problem? when i do that; html { height:100% overflow: hidden; } body { height: 100%; overflow-y: scroll; overflow-x: hidden; } This problem is solved. But it causes a few undesirable situations in other elements. Is there another option to solve this?
Guys, Css transform translate(-50%,-50%) is being ignored after adding the scale animation. Is there a way to keep the div centered to the mouse and scale the div?
I'm spitbaling here but you can make the cursor element a child of the element you want it to appear in, change the cursor's position to relative hide it and display it on the parent's hover
would mind helping me by making another video on how to prevent mouse cursor not go out of the body of the web page which may be useful on a systems like online exam system please
Год назад
This is not working for me, could someone explain to me how this could be added to wordpress? The codes don't work there. what a disgrace
For a normal webpage, you probably won't do it. But i think there's some cool cases where you can use custom animated cursor like these for some cool stuff :) (Other than gaming). Great tutorial!
I implemented this for my portfolio, but it seems there is a problem with the button on form submit, It looks like it prevents the form submit button from being clicked. I even add pointer-events: none; to the cursor, but it still doesnt work for the button type="submit"
do you know how to get .ani custom animated cursors to work, have tried this several times but never ends up working, annoying coz there some really cool sci-fi style cursors that would look awesome on phaser games etc
hi everyone! please help me! i put my custom cursor on my page and i have a problem, i can't click on any link. It works while the circle goes to mouse, but when they both together, a link is not clickable. thx!
For scrolling page
css: transform: translate(-50%, -50%);position: fixed;
js: cursor.setAttribute("style","top: "+(e.pageY - scrollY)+"px; left: "+(e.pageX)+"px")
Pure luck we have you here. I just randomly checked comments a while after I put back my cursor project from my portfolio site since cursor leaves the hooked div while scrolling, then updated again when the cursor is moved. Caused div element to jump to the cursor after scroll. :/ So thanks :D
You're a legend for this man
Css transform translate is being ignored after adding the animation. Is there a way to keep the div centered to the mouse?
@@sunkarasridhar3885 You need to substract half the height and half the width to your attribute (e.pageY - scrollY - Z), Z being half the height of your cursor
@@KriszX12 thanx a lot , man!
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.
Yep, realized that when I put the codepen up!
You just saved a life!
@@DesignCourse Pin This Comment Gary! 😁😁😁
I love
Nice solution, but there's another issue, when it hover a link the "hand" cursor shows up, at least on my page, there's a way to fix this?
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?
I'd say no to custom cursors, being from the times of downloadable cursors it just brings back bad memories. I think the only time it would be good is a browser game like an old style rpg
I say yes to customizing cursor! But it all does depend on the context. I'd want to (probably just for a personal project), maybe create a better svg of the original cursor (designed *for* the context) . And then give it some subtle transitions with minimal animations. Especially on something like all navigation elements. This would be to completely replace the original cursor, ofcourse. I mean, the more I think about it, the more the possibilities. Thank you for this introduction. #SweeetIndeed 17:48 🙌🏼
I'd say it depends. If the site is for a designer/photographer/creative blog then the answer is yes (minimal as you say) otherwise the answer is no.
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♥️
whats your portfolio i wanna look at it, maybe get inspired too :)
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!
really needed this one, was trying to figure it our with jquery coz i am handy with that.... love this one
You deserve more than a million likes man !!!!
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.
Yess why not ? It looks so cool like you can see the idea of custom cursor adapted by some Devs in so cool way
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.
@Rohan Kavathekar happy to help! : )
thank you so much
Such a great content especially for beginners. Thank you for this. Just keep these things up man. Fantastic job.
Bro look so much like the protagonist of fight club. No wonder why you could produce such great content!
Vừa vào đã nổi cả da gà 藍giọng a Phúc hayyy quá, mong sẽ tiếp tục cover ạ ❤️
very useful! I used it to create a photo frame design. I like your efficient code, no one line wasted
I saw many custom cursor tutorials yet end my search at your channel again.
This may have a problem, when the user removes his cursor from the browser window the cursor stays at the edge...what can be the the solution to remove this issue ... Can we use the mouseout event in js
use
window.onmouseout = (e) =>{
cursor.setAttribute("style", "display : none;")
}
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
Customizing the cursor, yes or no?
For personal websites or portfolio sure why not. But for business, e-commerce, or professional websites, bad idea!
why so?
@@christianachleitner9439 Every pages have purpose or expectation for visitors. The goal for developers is to build a site that will get visitor to comeback and visit site again or refer other visitors to visit that site in the future so site can grow. If developer fail to meet expectation, then the site would become useless. For example, over animated page that require loading time, would turn off for most visitors who want to seek for quick information. I would recommend read good books - "Don't make me think" and "Design Everyday things". This will put better perceptive for most front-end designers/developers.
@Hoyt Volker Well, in my opinion, if it perfectly fits the aesthetic of the website, it is professional and it gives a unique experience/feeling, it is very good and worth it.
@@arthurprather6720 That was great explanation and thanks for recommending the books
@@arthurprather6720 thats bs. Especially in advertising and design websites its a unique look and ux important...
Man YOU ARE SUPER HERO bring more creative tutorials , what about line animation ?
Hay this video is very exciting ! but I have single line on canvas and I want to change cursor to pointer as I hover over that line only. How can I achieve that?
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 👍
Thanks for the idea. I did this but got a problem, when I try to hover a div or click a div, the mouse pointer div comes in between so how to solve this problem. please help me.
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❤️
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.
Very neat and scalable solution
Thank you! Especially for mentioning pointer-events: none;
I get an error Cannot read properties of null (reading 'setAttribute'). Cursor doesn't move with my mouse. Just stays static in upper left corner.
This video has been helpful for me. Thank you so much.
Hey broo ... Successfully worked this same cursor, but this my container also moving up-down when i click on screen y??.. Please ... some help..
Thank you, great tutorial, exactly what I was after!
I created the cursor animation but now, the animation doesn't allow me to interact with my website components like the links and buttons.
I also tried to change pointer-events to auto. Still no luck.
The only fix I could arrive was is by letting the z-index stay at 0. Keeping it at 0 defeats the whole purpose of the cursor because it ends up hiding behind the dropdown menu and images.
What am I doing wrong?
In this implementation I'd say no, with different cursors that are context aware (like telling where to swipe, scroll or a call to action like buy or contact), yes. I think it would be possible to create such a thing from this, but since i'm not that good with javascript I'd have to try around a little bit to find out.
Hi Gary, I thank you for the intersting lecture about customizing cursor. it was precise and very interesting. I have a question though. I wan to create a big crosshair which moves with mouse move, except that this crosshair is as big as my display window in the .html file. then i want the horizontal and vertical lines of the cross hair be the size of my display window. i also want the horizontal and vertical arms of crosshair move vertically and horizontally as i move curser up/down and left/right on the window. i also want to add a square in crossing point of this big crosshair and move on an image and capture a piece of the image for measurement of a physical phenomenan, do you have any idea how to go around this? thank in advance.🙏
thanx for tutorial gary, u r always helpful for me.
Will that really work to click links on the page tho? Since there is a div between the link and the actual cursor.... Anyway, If anyone have used this method for their site and noticed this problem it can be solved with pointer-events:none; in css. That allows you to click through a div
Very cool, yes customize it all!
Hi Gary,
is it possible to change the cursor but not to the entire , but just a div for example, so i can use multiples cursor in different places for example ? How would you do that to choose a class div with your code?
you can just put the cursor thing into .className instead of body in CSS
Hi bro, can you make video about three. Js. And thanks for this amazing video
Great! But how i add a trail to the animation?
a new sub. It´s amazing
How to get this cursor in your whole page , i can only get it at the home page, when i scroll it goes away.
wow this is so good!
How can I make the hover effect?
when hovering over an object and doing an effect on hover
I would appreciate if you help me
bye friend
YES new designs LOVES it.
yes bacause of this cursor are very good for UX thats why this is amezing .....
Such a good Tutorial! Thank you so much!
Hello. My query in which part of my wordpress to paste the css code to animate the cursor. Thanks
hey! i was making a whiteboard projecct i want the cursor to look like prncil when i select pencil , etc please teell me how can i do it.............
'
When i scroll down page with middle mouse button or press buttons on header, page scrolling down as it's supposed to be, but that custom cursor stays where it is until i move again mouse. So above or under sections. I used codes from codepen. What is the problem? when i do that;
html {
height:100%
overflow: hidden;
}
body {
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
This problem is solved. But it causes a few undesirable situations in other elements. Is there another option to solve this?
I am using this in react but after adding mousemove event click events are not working some help please
What are the extensions that you have manually downloaded sir
my cursor is notshowing smooth transition seems like it shows a bit of lag i.e it does not seem to be synchronized
This is really cool tutorial :) Thank you a lot
I really appreciate your video, and I have a question, can you share with us how to hide the cursor in mobile mode? Thanks again!
Could you get any solution?
im having a problem where the custom cursor isnt registering clicks any ideas?
I am having the same problem.
@@JohnDoe-sz5jh It's late but set pointer-events: none; to .cursor class.
will you make a video that teaches how to use custom cursor svg's for hover and click?
Is this possible with WordPress? Looks great!
yes the method is the same , no extra twitch is necessary
Hello sir would it be possible to make a laser line that follows the cursor revolving around the center of screen?
can anyone answer this, I want to change the cursor style properties when hovering any link in the web page .
Really great video ! Hello from France
TypeError: Cannot read property 'setAttribute' of null
I've tried it on a WordPress site, but it didn't work.
my website is styled in css, can I just copy paste the css into the scss or does that not work?
It's very very good and useful. Thanks for the informations.😃
can you also use it on the desktop???
will do it definitely
I copied your code and the cursor does not move smoothly like yours, it lags, jumps from one point to another, transition is set
is there a way to make this without SCSS?
I love yout tutorial u are my inspiration thank u so much from Angola/Luanda....
Guys, Css transform translate(-50%,-50%) is being ignored after adding the scale animation. Is there a way to keep the div centered to the mouse and scale the div?
any tips on how to follow the mouse when scrolling? for me the circle freezes in place until im finished scrolling.
You mentioned there was a CSS only code. I added the CSS but it is not working. Is there another step? Hoping you still reply to this video :)
Thank you this is insightful
thanks buddy for this amazing video ;)
my mouse follower lags a little and sometimes it lags very much , any solutions??
how can i make the custom cursor only appear when I hover over some specific area (div)?
I'm spitbaling here but you can make the cursor element a child of the element you want it to appear in, change the cursor's position to relative hide it and display it on the parent's hover
The Cursor was made fine but now it's not clicking or selecting anything, I guess it is overlapping the actual cursor. How do I fix this?
would mind helping me by making another video on how to prevent mouse cursor not go out of the body of the web page which may be useful on a systems like online exam system please
This is not working for me, could someone explain to me how this could be added to wordpress? The codes don't work there. what a disgrace
not working for me in vs
How to custom cursor use in paint/ one note2017 plz help
For a normal webpage, you probably won't do it. But i think there's some cool cases where you can use custom animated cursor like these for some cool stuff :) (Other than gaming).
Great tutorial!
how can i get the same design in wordpress
i feel like his voice is similar to the rat character Remy in Ratatouille Disney movie. Its cool!!
Love your videos 🤘
I think that customize cursor is a great idea.
Great Stuff!!!
I NEED HELP, WHEN I TRY TO SEE THE WEBSITE, IT REMAINS WHITE. CAN YOU TELL ME WHY? THANK YOU
I implemented this for my portfolio, but it seems there is a problem with the button on form submit, It looks like it prevents the form submit button from being clicked. I even add pointer-events: none; to the cursor, but it still doesnt work for the button type="submit"
I have a similar problem my pointer wont click on the anchor tags.
I have a question. What font-size are you using?
thank u buddy, u helped a alot
do you know how to get .ani custom animated cursors to work, have tried this several times but never ends up working, annoying coz there some really cool sci-fi style cursors that would look awesome on phaser games etc
Is it possible to integrate this CSS/html script into Windows mouse settings itself, such as permanently changing your mouse cursor? Thanks.
it is a great idea.
thanks for such a good videos
hi everyone! please help me! i put my custom cursor on my page and i have a problem, i can't click on any link. It works while the circle goes to mouse, but when they both together, a link is not clickable. thx!
How would I do this on Neocities?
how to add to my Wordpress template?
Anyone know how to add particles falling or coming from the cursor?
Thanks Very Mach For This Video
Hi, how can I make it not pulsing .. just a circle :)
How this code work while the div have a class of cursor and not an id of cursor
how can i implement this into a Wordpress website (am using a purchased theme)?
is it possible?