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.
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!
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.
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
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.
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 🙌🏼
@@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.
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 👍
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.
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.
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
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?
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!
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
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?
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.
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.🙏
Customizing the cursor, yes or no? Depends on the niche. Interesting websites like css tricks, whose sole job is to look cool and teach other people how to do it, should have specialised cursors. In fact, they must! Like the custom scrollbar, it's their bread and butter. Social media sites could also get a lot of use out of them; expose their cooky side a little bit. Professional websites, on the other hand as well as your own portfolio should not. They should utilise css differently and kick ass on other fronts.
First of all, as to customizing cursors, yes, yes, yes. I mean, why NOT? To not do so would be like living in a house with no decorations. Secondly, I use a program called CursorFX and while I can create and basically put together a cursor package, each added cursor has a little area for an added 'script' in order to animate it. Do you happen to know, by any chance, if these scripts you cover might work for that? Thanks!
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 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, 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?
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?
Hello, Love to watch your helpful RU-vid videos. A small Q. Could you please do small tutorial about SignalR 1.10 .net Core with Angular 7 It would be very appreciated. thank you
Hello, thank you very much for the tutorial, I am trying to implement it in my own project but I don't know how to make the cursor change when it is on a link of type "a" you think you could help me. Greetings, thanks your tutorials are magnificent!
