hi everyone welcome back to our new tutorial hope you guys are well so today in this tutorial
i am going to show you how we can create this amazing beautiful cursor animation
using html CSS and a little bit of JavaScript and if you can see that our cursor is actually
changing its color after a few amounts of time and it is changing its color continuously
to a different color and we have added some functionalities to this cursor animation
first one is actually whenever i will stop moving our cursor it will hide into our screen so now i
will stop the moving of our cursor here you can see that whenever we have stopped moving
our cursor our animation is not now showing it's actually in our hiding position and now whenever
i will start moving our cursor here you can see that we can see our customer animation
and another functionality is whenever i will go out of our screen it will stop the animation
here you can see that whenever i will go out of our screen our animation will stop so these
are the functionalities and in a few moments i will show you how we can create this animation
using html css and javascript and before you start if you guys are new in my channel then
please please subscribe like this video and press the bell icon for the future videos and
if you guys have any question about this video you guys can comment below so let's get started
in our corridor first you have to create a stable boilerplate then you have to add a
star sheet also here you can see that i am giving a title and then i am linking my install sheet
which is style.css now let's go to our body and here first we have to create a div tag
and then now let's create a class for this div tag and the class name will be cursor that's it
and underneath this div tag we have to create a section let's create a class for this section and
the class name for this section will be main that's it and then i will get a heading this
heading this cursory animation heading so that's why create a h1 and this will be console animation
that's it now save go to our website and now refresh here you can see that we have our heading
here now let's go to our style sheet type our body and here first i will give a height and the height
will be 100 ph then i will create a background color and our background color will be this one
then we have to initialize carson and it will be none so after this one now we have to target our
main class so copy this class from here and then paste it here so first we have to give a height
and the height will be 100 ph then we have to give justify content center then align items
center and here at the first it will be actually display flags that's it now save go to our website
and now refresh here you can see that we have our background color and then our heading is actually
in the center position and we can't see any cursor here here you can see that we can't see any cursor
then we have to target our main again then we have to now target our h1 so first i will give a color
of our heading so our color of this heading it will be this one then i have to give a font size
and the font size will be 65 pixels and see now save go to our website and now refresh
here you can see that now we have our cursor animation heading here
and if you now go to our real website here you can see that we have actually two circle here we
have a bigger circle and inside this bigger circle we have a small circle now we have to create this
two circle in our this website here also so for doing this go to our html and from here copy this
cursor and then paste it here that's it so first i will give you that index and it will be 999
then i will give a position and the position will be fixed then i have to give a background color of
our cursor and our background color of this cursor will be this one then we have to give a width and
the width will be 20 pixel and a height will be also 20 pixel then we have to give a bottle radius
and the border radius will be 50 because i want a rounded border like a circle then we have to add
our pointer events and it will be none that's it and now i will add some box shadow and the
box shadow will be 0 0 and then 20 pixel and our color will be this one so i'll just simply copy
this one and then paste it two more time that's it and this one will be 60 and this one will be 100
that's it then i will add transform and the transform translate it will be minus fifty percent
then minus fifty percent and now i will add our animation here because i want to change the color
after a few amounts of time so that's why we have to add animation and the name of our
animation will be colors and the time will be five seconds and it will be infinity that's it and for
a starting point it will be display none that's it now we have to add our animation colors here
so that's why first we have to call our keyframes and then our animation name so this will be colors
so our first one will be zero percent so in our zero percent it will be actually filter because
i will add filter for changing our color so that's why filter and it will be huge rotate so first one
will be zero degree and then i will copy this one and paste it here and our second one would be 100
and this one will be 360 degree so now after this one now we have to create our bigger
circle our biggest circle here you can see that we have created our a smaller circle
now we have to create our bigger circle so for creating this one copy this class name from here
and then paste it here so now we have to target our pseudo element which is before
that's it now our content will be empty then our position will be absolute now i will give a width
and the width will be 50 pixel and our height will be also 50 pixel and then now i will add a border
radius and the border radius will be 50 percent because i want a rounded border like a circle
then i have to give a background color and our background color will be this one then i have to
give opacity and our opacity will be 0.2 because i don't want to give same opacity for our bigger and
for our smaller and i want this one to take opportunity 0.2 then i have to add our transform
and translate and it will be minus thirty percent then minus thirty percent that's it so after this
one now we have to go to india's.html file and here we have to add some script javascript so
that's why here create a script file and i insert this script first we have to target our cursor
this console so for targeting someone first we have to create a variable for this one
honest and then our variable name will be console that's it so now we have to target our this class
cursor class so that's why here we have to first write document dot query selector so here we have
to type our class name so our class name is cursor that's it then we have to add another variable and
this will be far and this variable name will be timeout that's it so we have to create a function
here and we have to create this function for follow our mouse movement because whenever i will
move our mouse our cursor animation will actually follow that movement so that's why first i will
comment out and this will be cursor movement that's it so let's create the function so this
will be document dot add event listener that's it and then this will be for our mouse movement
e and now here we have to add our expulsion and y position so that's why let x and it will be
e dot our page x that's it then we have to let our y also and it will be also e dot page y and
then we have to install our cursor and it will be dot style dot top and for our top it will be
y plus pixel that's it so let's copy this line from here and then paste here and
this one will be for our left and this will be x and this one will be for our display
and it will be block that's it so after this one now we have to create another function for
a stopping our cursor animation whenever we will stop our movement of our pointer so that's why so
first comment out and it will be desktop animation and this will be function and our function name
will be mouse as stopped and it will be empty then for our body part we have to copy this one
and then paste it here so whenever we stop moving our cursor i want to stop our animation also so
that's why a style and this will be done so after this one now we have to create another
argument and this argument is for actually hiding our animation because if we don't move our cursor
for a few seconds i will hide our cursor so that's why it will be hide animation so for this one we
have to clear and here it will be timeout that's it then we have to add a new timeout
so that's why and our handler will be mouse stopped that's it now we have to give a time here
now i will give 1000 millisecond and here if we stop our cursor moving for this amount of time
we will hide our animation so that's why we have to create this argument that's it now say go to
our website and now refresh so here you can see that now we can see our cursor animation here
and then now if we go out of our screen here you can see that our cursor animation is not hiding
we have to stop our animation whenever i will go out of our screen so that's why we have to create
another function so for creating this one first i will comment out and it will be a stop animation
of the screen that's it so for here also we have to call our document
then we have to add even listener and here it will be mouse out that's it
and we have to delete these lines and then here we have to give an empty parameter that's it copy
this line from here then paste it here that's it now save go to our website and now refresh
now if we go out of our screen here you can see that here you can see that our animation is
successfully stopped whenever i will go out of our screen and this is actually looking good i think
and here you can see that our cursor animation is actually changing its
color after a few amounts of time and if we now stop our cursor for one second
and here we can see our cursor animation and if we now start our moving here you can see that we
can see again our cursor animation and this cursor animation is looking also beautiful so that's it
guys i hope you guys enjoyed this tutorial and if you guys really enjoyed this tutorial then please
please subscribe like this video and press the bell icon for the future videos and if you guys
have any question about this video you guys can comment below so let's see you guys in our next
i tutorial you're there