LBRY Block Explorer

LBRY Claims • let's-build-with-javascript-using-mouse

bb3862c4a729f244bfc0d935ce10336188726081

Published By
Created On
11 Jan 2024 20:32:17 UTC
Transaction ID
Cost
Safe for Work
Free
Yes
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/aboPYxv

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/webcrunchblog?sub_confirmation=1

?? NEW COURSE: HELLO RAILS
https://hellorails.io

? Previously published at:
https://web-crunch.com/javascript-mouse-events-to-animate-text

? 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: https://twitter.com/webcrunchblog
Twitter(Personal Account): https://twitter.com/justalever
Facebook: https://facebook.com/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
...
https://www.youtube.com/watch?v=MgF9AajVjUw
Author
Content Type
Unspecified
video/mp4
Language
English
Open in LBRY

More from the publisher

Controlling
VIDEO
HOW T
Controlling
VIDEO
I'M M
Controlling
VIDEO
LATES
Controlling
VIDEO
LET'S
Controlling
VIDEO
INTRO
Controlling
VIDEO
LET'S
Controlling
VIDEO
LET'S
Controlling
VIDEO
EMAIL
Controlling
VIDEO
EMAIL