Recreating The Hover Effect That Shocked Frontend Devs
This CSS & JavaScript hover effect blew my mind when I first saw it, and I saw a ton of requests to explain it. So in this video, we're going to try to recreate it from scratch!
Prepping for your frontend interviews? Use code "conner" for a discount on my course FrontendExpert:
https://www.frontendexpert.io/conner
TikTok: / connerardman
LinkedIn: / connerardman
Video/Coding Gear: https://www.amazon.com/shop/connerardman
Business/brands 👉 [email protected]
Timestamps:
0:00 Particle Hover Animation Effect
0:18 Creating The Image Particles
1:26 Canvas Setup
2:22 Getting Image Data
2:55 Converting Pixels To Particles
5:04 Drawing Particles To The Canvas
5:56 Tracking The Mouse
6:21 Repelling Particles
9:25 Returning Particles
10:31 Load Animation
10:59 Performance Optimizations
