Eyes Watching Mouse

#webdev #javascript #css #fun

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.

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>

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%;
}

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)";
    })
}

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 ⚡