13 Interactivity and gesture-based UI math

The static web is dead. Modern surfers now expect web experiences that are defined by interactivity. They want elements that react to their cursor, interfaces they can drag and swipe, and animations that start or change as they scroll. Adding this rich layer of user interaction to your pages adds a touch of magic to your site, but there's nothing magical about the implementation. It's made possible by capturing user input, whether it's a click, a touch, or a scroll, and using math to translate that input into a visual change.

13.1 Mouse and touch event calculations

Every time a user moves their mouse, drags a finger along a touchpad, or touches their screen, the browser generates events packed to the brim with numerical data. The most fundamental pieces of data are the coordinates: the x and y positions of the pointer or touch point. Understanding how to capture and use these coordinates is the first step toward building any interactive feature.

13.1.1 Capturing the cursor position

13.1.2 Detecting touch gestures

13.1.3 Converting screen coordinates to local element coordinates

13.2 Custom slider controls

13.2.1 Building a custom linear slider

13.2.2 Building a custom rotary control

13.3 Scroll-based animations

13.3.1 Detecting scroll position

13.3.2 Creating dynamic UI changes with intersection observers

13.4 Solutions to Exercises

13.5 Summary