DEV Community 👩‍💻👨‍💻

Jagadeesh Koyya
Jagadeesh Koyya

Posted on

Eyes Watching Mouse

Hey there! How do you do? I hope you're doing superb! I hope the very best for you.

Here comes a tiny cool thing called "Eyes Watching Mouse" (wait a min...what's that?) let's talk about it, shall we?

We have a boiler plate for starters with index.html, style.css and script.js and the final outcome looks like this.

smile

Let's Start Building

We start with the html which is really easy and all it has are some div tags.

Html

<body>
    <div class="face">
        <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
        </div>
    </div>
</body>

Enter fullscreen mode Exit fullscreen mode

That's pretty simple, cool? The main div with a class "face" holds a face with two eyes and that's what you saw in the earlier image.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #333;
    cursor: pointer;
}

.face {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #ffcd00;
    display: flex;
    justify-content: center;
    align-items: center;
}

.face::before {
    content: '';
    position: absolute;
    top: 180px;
    width: 150px;
    height: 70px;
    background-color: #b57700;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
    transition: 0.5s;
}

.face:hover::before {
    top: 210px;
    width: 150px;
    height: 20px;
    background-color: #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-color: #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-color: #333;
    border-radius: 50%;
}

Enter fullscreen mode Exit fullscreen mode

I'll try to give you a brief of this code. So we had a background to highlight the face and we displayed it using flex. It holds another div, if you saw the html code earlier. We have a div with class "eyes" in it. That would be the main portion.

So when we hover over the face, we have this smile effect goes numb. That's when you hover inside the face. When the region of cursor gets over the face, you'll see the face smile.

Script

document.querySelector('body').addEventListener('mousemove', eyeball);

function eyeball() {
    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)";
    })
}

Enter fullscreen mode Exit fullscreen mode

To understand this, I strongly recommend you to have a knowledge hunch on querySelectorAll, getBoundingClientRect, atan2, pageX, pageY.

The querySelectorAll will select all the queries having in common like all p tags or all h1 tags. The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

I don't want to go for longer explainations, that wouldn't be so cool. See you next week! I just wanna wrap up here with the links to my Github repo and the live deployment of this whatever you can name-it-and-call-it.

Repo ⚡
Live ⚡

Top comments (2)

Collapse
 
jarvisscript profile image
Chris Jarvis

Very fun effects. Great explanation of how the JavaScript works.

Collapse
 
greenreader9 profile image
Greenreader9

Nice!

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs