nice video, i really like mouse trailers if they arent to fancy but since most people dont like it when something follows your mouse, i tend to just not use them ^^
Yeah for sure, I would have to agree with this. Super cool but definitely not for every site. Seems like I see them more on portfolio sites than anything. They'd feel really out of place on TH-cam for instance haha
This is exactly the type of content I was looking for! Quick, very informative and, most of all, interesting. This is not the nth way to center a div or to recreate a boring website. I don't want to build yet another bootstrap template, I want to build awwwards worthy pages. Keep it up!
i think it would be annoying af if we keep that always following a cursor (different computers may be slower and make that experience worse). But its a really cool idea to show it up when user moves cursor at item to tell them what function of that is. But its still better practice to tell user how he can interact with website without hovering mouse over stuff. Maybe that kind of interaction would be better in browser games like point and click. Thanks for the idea :D
I feel like this would work perfectly for like a new social media website or something so someone can interact with a person’s content and be able to tell what type of content it is
I see your videos on loop, along with being content rich you expression is also comendable ❤️. Each word and part of the video is easy to understand thanks to your Video Editing skill.
Hey Hyperplexed! First of all thank you for this video, it helped me very much. Second, could you help me with the problem that the "trailer"-div stops moving as soon as I go over a canvas-element? I am trying to solve this problem since hours but nothing works, because the position has to be fixed... Best regards, Valentin Kunz
Now what I want to do is find the operating system my code runs on, select the appropriate image of that OS' standard cursor, create a div with that image, have it translate to the cursor, hide the real cursor, and consequently make it so my website looks completely normal, with the normal cursor. But when you hover or click, I could implement animations and surprising visual flairs. The biggest issue I see here is getting the scale of the cursor right. I think the cursor looks differently sized on different computers, depending on screen size and user settings. But it's worth a shot. I'd be happy if it works on my screen only 😂
when i entered the last code, the cursor isnt tailing, what's the problem? (the ones when you make the trailer change when hovered on different data type)
Honestly I don’t like mouse trailers usually but I think this one could be cool if you only saw it when it hovered over the image so it looked like it expanded out of no where
bit of an odd case here but i just had my protein shake so im super full and the mouse trailer makes me feel pretty nauseous, but normally i also don't really like things lagging behind my mouse overall lol
Now change the color and render it on a full-screen--event-none--canvas every frame, blur and reduce opacity of that canvas each frame, and you get yourself a lightsaber.
I feel your channel will grow parabolically some day. Awesome content.
Thank you! I really hope so 😄
you predicted it
@@Chronacode woah! wtf! when i replied this he had around 3k subs! unreal :D
@@Hyperplexed hey you! you've done it!
Good prediction your content is amazing keep going
there's a huge demand for this kind of content on the front-end world. Hope you will keep on posting more often
Personally, I like the idea of the changing mouse pointer to indicate the type of interaction but not the 800 ms lag.
u can do it wai easier using cursor:url()
@@guilhermewxs1840But that won't be smooth at all. You cant animate the size
nice video,
i really like mouse trailers if they arent to fancy but since most people dont like it when something follows your mouse, i tend to just not use them ^^
Yeah for sure, I would have to agree with this. Super cool but definitely not for every site. Seems like I see them more on portfolio sites than anything. They'd feel really out of place on TH-cam for instance haha
would I normally use a mouse-trailer? no. did I learn some cool frontend stuff anyway? YES. Hyperplexed, you're awesome dude 🏆🎊
I like the interactive but the fact that it lags behind the mouse drives me nuts
This is exactly the type of content I was looking for! Quick, very informative and, most of all, interesting. This is not the nth way to center a div or to recreate a boring website. I don't want to build yet another bootstrap template, I want to build awwwards worthy pages. Keep it up!
5 years ago I made funny fancy stuff like this. Like to see it get's more attention now.
I can't believe i found this channel on my animtion journey!! Great! Thanks!
I have a difficult time sleeping but your voice helps me calm down. My new favorite youtuber.
I like how this guy went from programming and showing how code works to just redesigning website layouts
This content is insane, keep grinding and you will be huge
This didnt need to be so cool, great video
Youre adding so much value to all of us thank yuo!
I would just remove the trailing effect outside the clickable areas.
Otherwise great content.. keep it up!
Broooooo I can't stop watching these
This is my first Long video ever seen from your channel and I really like it you are wonderful
i think it would be annoying af if we keep that always following a cursor (different computers may be slower and make that experience worse). But its a really cool idea to show it up when user moves cursor at item to tell them what function of that is. But its still better practice to tell user how he can interact with website without hovering mouse over stuff. Maybe that kind of interaction would be better in browser games like point and click.
Thanks for the idea :D
I’m in love with your channel and your design sense 😅
I feel like this would work perfectly for like a new social media website or something so someone can interact with a person’s content and be able to tell what type of content it is
That's really awesome man!!
I see your videos on loop, along with being content rich you expression is also comendable ❤️. Each word and part of the video is easy to understand thanks to your Video Editing skill.
This is awesome! I love it so much! I'm just about to sit an exam for my frontend at university so this is very encouraging :D
Bro that zindex isn’t nearly high enough my coworkers will find a way to make their features higher 😂
Awesome content, I have watched every single video. Including the ones I already had an idea on how to do
this program works great! exactly as I wanted
sick content, dude. love you
Never ever seen such content Amazing!!!!
Impressive explanation
Loving the tutorials!
Thank you so much Sensei! You are a blessing!
Give it cute eyes and a hasty running expression.
And it would become like your personal butler running to show you around.
That was great. Thank you.
Isn’t there a lag when you move cursor too fast? 👀 I remember how I did it in ReactJS last year and it was my worst nightmare 😂
This is crazy good
Awesome stuff. 😃
I think you should write a book about designing. You have amazing content
Bro u know that u can use a image in the cursor: property with a url, right?
great vid!
This is amazing this idea is soo cool I mad it in company and manger be soo good feed back ❤
Thank You so much I have been trying to crack it since 2 days.. Finally it worked.. thanks
Hey Hyperplexed! First of all thank you for this video, it helped me very much. Second, could you help me with the problem that the "trailer"-div stops moving as soon as I go over a canvas-element? I am trying to solve this problem since hours but nothing works, because the position has to be fixed... Best regards, Valentin Kunz
Thank you so much for this..
Now what I want to do is find the operating system my code runs on, select the appropriate image of that OS' standard cursor, create a div with that image, have it translate to the cursor, hide the real cursor, and consequently make it so my website looks completely normal, with the normal cursor. But when you hover or click, I could implement animations and surprising visual flairs.
The biggest issue I see here is getting the scale of the cursor right. I think the cursor looks differently sized on different computers, depending on screen size and user settings. But it's worth a shot. I'd be happy if it works on my screen only 😂
so good
so cool!
WHy so underrated
This video is great
cool tutorial, 100% works, rep
Thank you
Ty I got my first divine because of you
Thank you.
nice video
I watch this and understand nothing
buuttttt
PWETTY BUDDONNSSSS ༼ つ ◕_◕ ༽つ
when i entered the last code, the cursor isnt tailing, what's the problem? (the ones when you make the trailer change when hovered on different data type)
Honestly I don’t like mouse trailers usually but I think this one could be cool if you only saw it when it hovered over the image so it looked like it expanded out of no where
I'm confused why you opted to use the animation API as opposed to just `transition: 0.1s;` or something.
So I did try this in next js, but some some reason the pointer animation always lags a bit
can you show us how it would work in svelte?
Yes.
me on mobile: am about to end this man's whole carrer😏
Nice video besides I’m a beginner and followed it step by step and can’t seem to get it to run properly
what's the document on the js part ?
sry im starting
bit of an odd case here but i just had my protein shake so im super full and the mouse trailer makes me feel pretty nauseous, but normally i also don't really like things lagging behind my mouse overall lol
How can i be able to understand what you did with the javascript , you have a great content by the way ^^
I suggest that you for making an online course at Udemy that teaches us to make unique interactive websites!
finally found
Incredibly useful. Can you make this into a browser extension? Users who increase their pointer size for accessibility will love to have this feature!
version?
chuck a pid controller on it
oh my god i could add exponential easing for x and y axis haha this is going to be funny
Now change the color and render it on a full-screen--event-none--canvas every frame, blur and reduce opacity of that canvas each frame, and you get yourself a lightsaber.
This would be hilarious if you also hid the mouse, so as to make it lag 800ms behind constantly
"Beautiful or worst thing to ever exist?"
Why can't it be both?
Video 2
yo
Obviously, it's the worst incredibly useful thing to ever exist!
Video
What in the actual fuck is JavaScript syntax 💀
Aaaaaaaaaa
osu!
wtf