Slope measures how much one variable changes relative to another. In a linear equation, it is the constant rate of change: y = mx + b, where m is the slope and b is the starting value when x is 0. In frontend work, slope models changing size, position, speed, and progress. section 1.4.5
y = mx + b
Use the linear-equation form y = mx + b to identify the rate of change, input, output, and starting value. section 1.4.5
A fluid container width
A container grows from 400px at a 500px viewport to 800px at a 1000px viewport. Its slope is (800 - 400) / (1000 - 500) = 0.8, so its unclamped width is 0.8 × the viewport width. CSS can preserve that relationship with width: clamp(400px, 80vw, 800px), keeping the result within the intended bounds. section 6.5.3
Slope supports several practical frontend calculations:
- Map scroll distance to progress with progress = scrollY / totalHeight. section 1.4.5
- Represent motion with position = initial + speed × time, where speed is the changing rate. section 1.4.5
- Read animation speed from a cubic Bézier curve: steep slopes produce faster motion, while shallow slopes produce slower motion. section 11.1.4
Table 1.5 Examples of linear equations
| Task |
Code |
Explanation ( |
| Define a responsive width in CSS. |
|
m is 0.5, |
| Calculate consistent motion in JavaScript. |
|
m is the variable |
Compare slope-based frontend patterns for responsive widths and consistent JavaScript motion. section 1.4.5
