Let's Build with JavaScript - Using Mouse Events To Animate Text

In this installment of my Let's Build with JavaScript series I talk about using mouse events to animate text.

This tutorial is heavily inspired by a video from Wes Bos' course JavaScript 30 which I highly recommend for a crash course in JavaScript.

View the CodePen

We'll be building a text-shadow animation that takes place on mouse hover. As you move your cursor over a containing div the text can animate in real-time thanks to JavaScript events. We'll target the mousemove event specifically to hook into coordinates defined in the browser relative to where your cursor lands on the screen. Combine some math and some ES6 and we've got a pretty cool little animation effect.

Relative links:

• MDN: Events
• MDN: mousemove Event
• JavaScript30

The Series So Far

• Let’s Build: With JavaScript – DIY Dropdowns and Responsive Menus
• Let's Build: With JavaScript - Broadcast Bar with Cookies
• Let's Build: With JavaScript - Sticky Nav
• Let's Build: With JavaScript - Dynamic Tabs
• Let's Build: With JavaScript - Modals
• Let's Build: With JavaScript - HTML5 Video Player
• Let's Build: With JavaScript - Accordions
• Let's Build: With JavaScript - Skeleton Screen Effect
• How to Code an Off-Canvas Menu - Let's Build: With JavaScript
• Show More – Show Less Toggle with JavaScript
• How to use Local Storage with JavaScript
• Let's Build: With JavaScript - Dynamic Checkboxes