Awesome Cursor Animation on MouseMove Using Javascript

◘ Download Files From Here : www.darkcode.i...
◘ Facebook Page: / darkcode0
◘ Instagram: / darkcodeonline
◘ Paypal Donation: paypal.me/YBen...
◘ My Patreon: / darkcode
◘ Code Editor: VS Code
◘ Packages installed : Emmet, Live Server
◘ Color Theme Used : One Dark Pro
Track: Syn Cole - Gizmo [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Syn Cole - Gizmo | Hou...
Free Download / Stream: ncs.io/Gizmo

[@taqyathallahxtkj1962]

Thats crazy bro...,thanks for your sharing your Idea,im support and following you...

[@briandesign]

nice mouse effect!

[@DarkCodeOnline]

Thanks!

[@razarsaw]

Your video was great and made me unboard. Keep up the great work.

[@tagore4d]

Thanks so much for the video. Its super fun to create this.

[@tradewithmarket]

awesome

[@Explorador170]

Thank you very much

[@AzoxSudo]

i respect you always like your work keep it up

[@DarkCodeOnline]

Thank you so much 😀

[@brandonalexis8263]

That's a awesome effect, nice vid.
Excelent 💪😃

[@abubakrhoseini238]

Thank you so much for this tutorial
But a question :
Why my hover is not working?
I say when p:hover then ~cursor2 {width:5rem}but it's not working For me

[@dpphi76]

me too

[@Aditya35654]

Your hover effect video was awsome

[@MSVInkognito]

good idea to make ghost from future video follow the mouse

[@mahmoudahmed8231]

thank u pro
nice work

[@KaranSwarnakar1]

nice work

[@Heckmen707]

Thank u helped me to get extra marks for it

[@priyanzhu]

A great video from a great developer.

[@amarquezdev]

Muchas gracias!!

[@George_Chris]

Nice Cursor 😀. Keep going 💪. How long are you programming in HTML, CSS & JavaScript? Plus I love these languages, but I don't know if these languages are in the future requested, because I learn these languages from scratch (from the beginning of Juni)?
Have a nice day
George

[@ALLINONETECH6]

These are not programming language 😇

[@ALLINONETECH6]

@Eren Yeager - Shimashou Tatakae yes js is, but not html and css

[@validusername5481]

"The Thumbnail says animatoin"

[@not_kelbaz]

XD

[@fizzio3d]

I wanna say something...
you should put the transition only in the background.

[@MenuGaming-bx5qv]

do u have wed developer job pls tbh i need this answer pls bro for god seek

[@CyroCoders]

I made a cursor with a p5 canvas and it looks exactly like this one different color

[@emorock_2592]

It's super Awesome!!!

[@adityaraut9441]

Another great video!!

[@lorenzocerato6081]

Awesome video! If I can ask, what's the name of the vs code theme you use? Looks like 'atom one dark' but it's not the same...

[@user-not-found-97]

Theme : material theme
u can find in Vs Code easily by going in extensions
I'm not sure..

[@khaledbenmechiche402]

Thank you !!

[@DarkCodeOnline]

You're welcome!

[@xenyatox9814]

Cool

[@sianor_sd1869]

hi what is you app for programing?? and vs code or adobe dreamer wich is better?

[@AdeyCoder]

👏👏 nice

[@lauchaamoral]

Tremendo!! Un genio

[@thevloglife105]

There is no hand cursor, please let me know how to do get hand cursor

[@smylmrz]

I'm doing the exact same thing, but the cursors are not moving smoothly. they lag for some reason. I downloaded your code, it's also lagging

[@ravindrareddy4453]

does this works with hover on other elements?

[@arjunaajju5777]

is this applicable only on websites

[@raprap9538]

can u make moving stickman😅

[@JamesLewis-ej1on]

This is great but I am having one issue that I am struggling with...
a:hover ~ .cursor {
transform: translate(-50%, -50%) scale(1.5);
background-color: var(--secondary);
opacity: 0.5;
}
a:hover ~ .cursor2 {
opacity: 0;
}
I want the change to occur when I hover over any "a" tag.
This isn't working, doesn't matter if i change "a" to a class selector it just doesn't do anything, everything else is working fine, can anyone shed some light on what I'm doing wrong!?

[@IamNoldor]

i have same problem

[@IamNoldor]

What does it mean ' ~ ' in CSS?

[@muhammadehtisham4425]

How did you solve it ?

[@hameedkhan008]

Nice vedio
Can u please tell me
how to place font awesome icon to input field.
Please reply
I have asked the same question to your insta account but no reply yet.

[@yss64]

go to fontawesome.com/cheatsheet to get the id of the icon you need, then put something like this into the placeholder/value of your input: "" in this example the icon's id is "f002" so just replace it like this "&#x" + "ID of the icon you want"

[@yss64]

also make sure the font-family of the input field is "font-family: FontAwesome, "your desired font"; "

[@hameedkhan008]

@@yss64 thanks bro for the clearification.
Can we customize the icon
Like its size, color etc. Without affecting the input field (placeholder) text.
Suppose,
I have a placeholder of 'username'
With icon, then i only want to customize my icon without affecting the 'Username'
Please clear it.

[@shammaskavi]

.content:hover ~ .cursor2
In the above syntax, what does this ~ signify?? can you please take a moment to explain

[@ravichauhan2111]

It is general sibling combinator...you can Google it for more info.

[@shammaskavi]

@@ravichauhan2111Got it, thanks mate!

[@jezius]

How can see browser and code ?

[@hemanth1939]

how can i add the effect on my pc?

[@tugssanaa3996]

function e isnt working it says error

[@syediqbalahmed3176]

vola ...

[@amilmajumder1492]

** 😍😍😍