Today we'll be making this cute chicken follow your mouse! We will use JavaScript to make the eyes of this CSS chick follow where ever your mouse goes. Can you drive this chick crazy? 🐣 See the complete demo on this Codepen. HTML Structure I want to mention we won't be building the full chicken in CSS, that's for another day! So let's focus on making these eyes follow our mouse. < = > div class "eye eye-left" < = > div class "eye-inner" </ > div </ > div < = > div class "eye eye-right" < = > div class "eye-inner" </ > div </ > div This is the HTML Structure for our eyes, we will need an outside layer (the outer white part) the eye-inner bit (black layer) and we will use a pseudo class to give it the pupil (white). CSS As for the CSS let's start with the main white outer layer: { : flex; : ; : ; : absolute; : ; : ; : ;
  &-left { : ;
  }
  & { : ;
  }
} .eye display width 48px height 48px position bottom 41px background #fff border-radius 50% left 26px -right right 26px A basic round shape because of our border-radius: 50% and white background. Now let's move on to the black inner part: {
  &-inner { : relative; : inline-block; : ; : ; : ; : black; : ; : ; : ;
  }
} .eye position display border-radius 50% width 40px height 40px background-color border-radius 50% margin-left 4px margin-top 4px As you can see, the black part is a little bit smaller than our main layer. The last part is the pupil: {
  &-inner {
    &:after { : absolute; : ; : ; : ; : ; : white; : ; : ;
    }
  }
} .eye position top 2px left 10px width 20px height 20px background border-radius 50% content ' ' You can see it's way smaller, and we position it in the top center to start with. JavaScript Eyes Follow Mouse To make the eyes follow the mouse, we will calculate the mouse offset from the eye, next we will add a rotate on the eye div. Since we are using a round div, it will rotate around its own axis, making it appear to follow your mouse! First we need to detect the mouse moving container = .querySelector( );
container.addEventListener( , e => { }); const document '.container' 'mousemove' // Ok mouse is moving! Once that happened let's get both our eyes and loop over them. eyes = .querySelectorAll( );

[].forEach.call(eyes, {}); const document '.eye' ( ) function eye Awesome, now we need to do some calculations so let's look at the full end code with some comments: container = .querySelector( );
container.addEventListener( , e => { eyes = .querySelectorAll( );
  [].forEach.call(eyes, { mouseX = eye.getBoundingClientRect().right; (eye.classList.contains( )) {
      mouseX = eye.getBoundingClientRect().left;
    } mouseY = eye.getBoundingClientRect().top; radianDegrees = .atan2(e.pageX - mouseX, e.pageY - mouseY); rotationDegrees = radianDegrees * ( / .PI) * + ; eye.style.transform = ;
  });
}); const document '.container' 'mousemove' const document '.eye' ( ) function eye // Get the mouse position on the horizontal axis let // If it's the left eye we need the left offset instead the right if 'eye-left' // Now we also need the vertical offset let // Now we are going to calculate the radian value of the offset between the mouse and the eye let Math // Let's convert this into a degree based value so we can use it in CSS let 180 Math -1 180 // Now all we have to do is add this degrees to our eye! `rotate( deg)` ${rotationDegrees} There you go, a mouse tracking cute little chick! Thank you for reading, and let's connect! Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on or Facebook Twitter Previously published at https://daily-dev-tips.com/posts/javascript-mouse-tracking-eyes-%F0%9F%91%80/

CodePen

Facebook

Twitter

These Full-stack Projects Are a Must for Your 2020 Portfolio 🤯

How To Create CSS Neon Animation

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Creating Mouse Tracking Eyes using Javascript 👀

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

CSS Recreation: The Frosted Glass Credit Card Design

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

CSS Recreation: The Frosted Glass Credit Card Design

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps