Demo: https://jsfiddle.net/pfhwqdgs/
Resizing or positioning items based on page scroll is a pretty common trend at the moment, so this article will serve as a reference for what's required.
The primary goal here is coming up with a normalized number; something between 0 and 1.
In applied mathematics, a number is normalized when it is written in scientific notation with one non-zero decimal digit before the decimal point.
In practice, there are four parameters we need to start with:
- What's the minimum height of our image?
- What's the maximum height of our image?
- When should we be showing the minimum height?
- When should we be showing the maximum height?
In our demo, we define those as:
// Minimum / Maximum height of our image
const MIN_HEIGHT = 100;
const MAX_HEIGHT = 300;
// Where we should start / end normalizing
const MIN_TARGET = 200;
const MAX_TARGET = 500;
This formula applies here, and to tweening, so it's good to remember:
min + (max - min) * ratio
In order to handle our image size transition, we'll apply that formula to our numbers:
image.height = MIN_HEIGHT + (MAX_HEIGHT - MIN_HEIGHT) * ratio
Where do we get ratio
from? That will be our normalized number derived from our scrolling/page position.
ratio = (window.scrollY - MIN_TARGET) / (MAX_TARGET - MIN_TARGET);
The ratio formula here is pretty similar to the above, but we reduce our dynamic value by our MIN_TARGET which will help reduce the lower end of our ratio to 0. (for normalization)
Now we have to cap the ratio so it doesn't dip below 0 or above 1.
ratio = Math.min(1, Math.max(0, ratio))
The full code looks like this:
const MAX_HEIGHT = 300;
const MIN_HEIGHT = 100;
const MAX_TARGET = 500;
const MIN_TARGET = 200;
var image = document.querySelector('img');
var ratio = 0;
// -------------------------------------------------------
window.addEventListener('scroll', function() {
// Determine ratio of scroll to target
ratio = (window.scrollY - MIN_TARGET) / (MAX_TARGET - MIN_TARGET);
// Normalize ratio
ratio = Math.min(1, Math.max(0, ratio));
// Set height based on ratio
image.height = MIN_HEIGHT + (MAX_HEIGHT - MIN_HEIGHT) * ratio;
});
window.dispatchEvent(new Event('scroll'));
Top comments (0)