10 Vectors and geometry in UI design

 

This chapter covers

  • Understanding the fundamentals of vectors and geometry in web dev
  • Using geometry to manipulate the DOM
  • Working with vectors in JavaScript
  • Creating sophisticated geometric shapes and animations in CSS

When you examine a web page from the perspective of a frontend web developer or designer, you know that underneath that surface is a bunch of HTML tags, CSS rules, and JavaScript statements. But below all that code there's another, even more fundamental layer: the math that makes the code work. In particular, modern web browsers use concepts from vectors and geometry to position elements, rotate and scale graphics, animate UI components, and define shapes for layouts.

10.1 Mathematical foundations: points, vectors, and bounding boxes

For the rest of this chapter to make sense, and to be able to take this chapter's concepts and examples and use them to improve your own web page code, there are a few basics about vectors and geometry that you need to know. I'm going to keep things relatively simple by focusing on 2D geometry here since most web content is laid out on a flat (two-dimensional) plane (your browser window). Here are the key ideas you need for this chapter:

10.2 DOM geometry: measuring and aligning elements with JavaScript

10.2.1 Calculating the center point of an element

10.2.2 Aligning one element relative to another

10.2.3 Geometric hover effects

10.2.4 Parallax scrolling with geometric precision

10.3 Manipulating vectors in JavaScript

10.3.1 Essential vector operations for DOM developers

10.3.2 Using vectors to have an element follow the mouse

10.3.3 Animating an element to a mouse click position using vectors

10.3.4 Dragging with geometric constraints

10.4 Geometric clipping and motion paths

10.4.1 Clipping elements

10.4.2 Motion paths

10.5 Solutions to Exercises

10.6 Summary