Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 25, 2022 03:24 pm GMT

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>

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


Original Link: https://dev.to/jagadeeshkj/eyes-watching-mouse-269c

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To