Animated Eyes Follow Mouse Cursor | Javascript Mousemove 

code html : code css : *{ margin: 0; padding: 0; box-sizing: border-box } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #5d3800 } .face{ position: relative; width: 300px; height: 300px; border-radius: 50%; background: #ffcd00; display: flex; justify-content: center; align-items: center } .face::before{ content: ''; position: absolute; top: 180px; width: 150px; height: 70px; background: #b57700; border-bottom-left-radius: 70px; border-bottom-right-radius: 70px; transition: 0.5s } .face:hover::before{ top: 210px; width: 150px; height: 20px; background: #b57700; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .eyes{ position: relative; top: -40px; display: flex } .eyes .eye{ position: relative; width: 80px; height: 80px; display: block; background: #fff; margin: 0 15px; border-radius: 50% } .eyes .eye::before{ content: ''; position: absolute; top: 50%; left: 25px; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #000; border-radius: 50% } code javascript: document.querySelector("body").addEventListener("mousemove", eyeball); function eyeball() { 'use strict'; var eye = document.querySelectorAll(".eye"); eye.forEach(function (eye) { let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2) let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2); let radian = Math.atan2(event.pageX - x, event.pageY - y); let rot = (radian * (180 / Math.PI) * -1) + 270; eye.style.transform = "rotate("+ rot +"deg)" }) }

Me: *places cursor on face* Face: 😐

Finally a video without the missing script. Thanks. Will make good use of the technique.

This is freakishly brilliant! Thanks for sharing man!

Nice to see you doing javascript, keep it up with the big 3!!

You Are Doing So Great Man!!!

Wow! This is awesome!

Excellent stuff. Love the videos.

The best tutorial ever

How Amazing & Also fun!!♥♥

Superb bhai mind blowing

i love your chanal the best chanal ever been seen

i just tried this! it s so cool ! thnks

Sir loved your video's which helped me a lot in my school projects i hope that in future too you will upload such amazing video's

My man you are a champ in coding bro keep it up😆😆

Sir you are just amaizing

you are my inspiration💖😎❤💪

Verrrryyyy...nice video bhaia.Salute you 😊

Thanks pal, very useful.

Good job!

that's a lot of fun to programm xD

Great bro

It's so fun, greate video

thank you so much sir

The Best!

wonderful content 😒🙄😊😀 !!

ehh !! nice 😍

good job great, I like your video.😃🙂🤩😍

little javascript but awesome result

Just wow

how can people dislike this🤔🤔 it's so cool, i love online tutorials, thx for making such amazing videos 👍👍👍

Eres un genio

Nice one bro

Awesome...

Nice 👍🏻 :)

The video is amazing, but even when I wrote everything the way it is, I was not able to get the same results. do i have to install something additional to achieve it?

Super .....

Nice...😍

Damn awesomeeeeeeeee tha.

j'adore

big fan brooo🔥😉

thanks bro

This is why we code ✌️

I don't know how else to say how much u inspire me. My birthday is in two days my greatest gift will be to meet with you sir. You are always blowing my mind.

Cool

My practice video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ZhRu10zHXMQ.html

Sir, In the html file you have written "getBoundingClientreact" it is working on vs code only and give error on other ide, and error is for capital R at React after that , it work fine for me.

nice video

cool

El primer proyecto que hice 😎👍🇦🇷

that's cute

Hahah love this

What is client bound rect function ,how it works

wow

which text editior u use???????

Your new subscriber

Can you make it into form bro? Like when you type into the form the eyes animation will follow. Thanks.

Wow

I am trying this but eyes is not working please help me

Wish you'd explain the code. Especially the math you did with moving the eyeballs. It's a very interesting thing to program, I want to understand what each line of code is doing.

Niece pro

Haha love these videos but i watch them so much the darn soundtrack is stuck in my head

plz use tho old editor if you can

. had this one vice versa xD , aliens really do exists :D ahaha

can make videos with js definition ????

Sir/Mam, Please help me that how we can change the position of this face to bottom-right side of web page

Can you please upload a playlist on css training i want to become like you in hindi language plz i request you plz

how to do it with screen touch

really like the css tutorials but most of them like this project don't work for some reason on either of my browsers Chrome, Firefox or IE ! is there another one i can try these on that will work ?

How to remember precise settings and codes

event deprecated what should I do?

Wow...nice i like it. 😍

sir vo clock valia program nahi chal raha ha javascript kam nahi kar raha ha sir koi link ha kaya uss js ka liya

sir ham source code kistrah leskty hain??????

Kayo software che sir

can i have the codepen link?

what software do you use sir? thanks

Y no emmet?

How haven if wear phone

Konsa software usekeya hai plz btaiye

Hi i try to understand EYE function .. can some one in short words explain it? how it works?

Sir iske saath aap explain bhi kiyaa karo. Plz

Getting error like getBoundingClientrect() is not function plz help me

I need Source code for Practice .......

Sir I tried the exact same code everything was working very well except the javascript ...Plz Help with that.

Sir evdry thing is written but cant moving eyes why

So funny 😂

Very Nice 😎👍

Funnn

Какая прога?

Could you give me the source code?

3:33 why i got only one eyeball? what's wrong with my code?

my js file isn't working !!

RAPTILE EYE :D

Why don't you share code? It could be helpful if you share your code.

Can someone explain to me the math of the javascript?

Math!!!!!!

Maine sab same keya Parr Mera sirf background aur yellow Circle aaya baki kuch bhi nhi aaraa

Code please

Where is your code???