loading...

Let’s Build with JavaScript – Using Mouse Events To Animate Text

justalever profile image Andy Leverenz Originally published at web-crunch.com on ・2 min read

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:

The Series So Far

The post Let’s Build with JavaScript – Using Mouse Events To Animate Text appeared first on Web-Crunch.

Posted on by:

justalever profile

Andy Leverenz

@justalever

Product Designer @memberful/@patreon, Blogger/Vlogger @webcrunchblog, Guitarist 🎸 and YouTuber. I enjoy whiskey, metal, and people watching. Most recent launch: Hello Rails (https://hellorails.io)

Discussion

markdown guide