Let's Build with JavaScript - Using Mouse Events To Animate Text
Hi, My name is Andy Leverenz and I work as a Product Designer. For fun, I design, code, and write. Check out my blog called Web-Crunch https://web-crunch.com where I publish design and development tutorials with the occasional vlog.
====================
⚙️View the CodePen https://codepen.io/webcrunchblog/pen/...
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 https://javascript30.com/ which I highly recommend for a crash course in JavaScript.
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.
====================
☕️ Keep me awake. Buy me a coffee
https://www.buymeacoffee.com/webcrunch
📰 One-Click Subscribe:
https://www.youtube.com/user/webcrunc...
💎🛤 NEW COURSE: HELLO RAILS
https://hellorails.io
💻 Previously published at:
https://web-crunch.com/javascript-mou...
💻 Check out the blog:
https://web-crunch.com
🦄 Check out my personal site:
https://justalever.com
🚀 Links:
Weekly Newsletter: https://web-crunch.com/subscribe
Twitter: / webcrunchblog
Twitter(Personal Account): / justalever
Facebook: / webcrunchblog
Dribbble: https://dribbble.com/justalever
Github: https://github.com/justalever
📘Check out my book on UX Design:
"LUXD: Learn User Experience Design"
https://web-crunch.com/books/luxd
📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"
https://web-crunch.com/books/ptt
💯 Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease:
http://bit.ly/webcrunchhosting
🌊 Need more advanced hosting for Rails, PHP, Node, or other projects? Digital Ocean has you covered.
https://m.do.co/c/ee243ee15648
💎 Ruby on Rails devs, Try HatchBox.io. You'll save upwards of 50% compared to Heroku. I use it and love it!
https://hatchbox.io/?via=andy