Doing Booping: Whimsical Effects on Mouseenter

Опубликовано: 13 Ноябрь 2024
на канале: CSS-Tricks
5,075
186

Joshua Comeau crowdsourced/coined the term. These are sorta like hover/focus states, except that they aren't. Your thingies (links, buttons, etc) should have those states still. A "boop" is a more whimsical effect that runs once when the mouse enters it, and finishes the run even if your mouse leaves (which is something CSS can't really do).

Rather than Josh's React implementation, we'll start in CSS and see how far we can get, then look at an alternative vanilla JavaScript approach.