Sharing Top Content from the Angular-sphere.

Code Challenge #4: Build An Eye-Tracking Alien with JavaScript ― Scotch

  • This week on the challenge we shall be delving into mouse tracking with JavaScript and simple animations with CSS.
  • We were browsing CodePen and saw this awesome CSS alien built by Eduardo Sada.
  • View the original CodePen here: taken the CSS alien and added JavaScript.
  • You can use CodePen or any other similar means to try the challenge and do well to share the link with us.
  • Use JavaScript to make the alien’s eye follow your mouse cursor – You shouldn’t have to write any extra HTML/CSS for the mouse-tracking.

Hi and welcome to our Code Challenge #4. This week on the challenge we shall be delving into mouse tracking with JavaScript and simple animations with CSS.

The Challenge

The challenge is basically to build this Alien from Mars. We were browsing CodePen and saw this awesome CSS alien built by Eduardo Sada. View the original CodePen here: taken the CSS alien and added JavaScript. Notice the cool thing about our alien when you move your cursor around?

The alien’s eye moves and always tracks your mouse cursor.

Try to implement that feature using JavaScript. You can use CodePen or any other similar means to try the challenge and do well to share the link with us.

Requirement

Complete this awesome challenge using JavaScript.

Use JavaScript to make the alien’s eye follow your mouse cursor

You shouldn’t have to write any extra HTML/CSS for the mouse-tracking. Only JavaScript for this part

Bonus

Our Alien blinks occasionally, you could implement that also. For this part, you will need to add a CSS animation.

Resources

Check out the base code for the HTML and CSS without the eye tracking effect and…

Code Challenge #4: Build An Eye-Tracking Alien with JavaScript ― Scotch