I’m trying to achieve a similar effect to the images on this page: https://sameold.com except I only want the images to scale in the y direction.
I’m currently experimenting with using a scale3d(1, (height of image minus y position of image / image height), 1 ) when ever I scroll either up or down.
However the image does not stick to the top of the screen when I scroll.
I’m unsure if I’m having the right approach. I also suspect that the ratio is changing as the height of the getBoundingBoxRect changes.
let section = document.querySelectorAll("div");
var scrollPos = 0;
function fracOfHeight(imgH, y) {
return (imgH + y) / imgH;
}
window.addEventListener("scroll", function () {
if (document.body.getBoundingClientRect().top < scrollPos) {
section.forEach(function (v) {
let rect = v.getBoundingClientRect();
let rectH = rect.height;
let y = rect.top;
let frac = fracOfHeight(rectH, y);
if (y < 0) {
console.log("down", y, v.style.transform);
v.style.transform = `scale(${frac <= 1 && frac >= 0 ? frac : 0})`; // largern than 1 or smaller than 0
} else {
v.style.transform = `scale(0)`;
}
});
scrollPos = document.body.getBoundingClientRect().top;
}
if (document.body.getBoundingClientRect().top > scrollPos) {
section.forEach(function (v) {
let rect = v.getBoundingClientRect();
let rectH = rect.height;
let y = rect.top;
let frac = fracOfHeight(rectH, y);
if (y < 0) {
console.log(
"down",
y,
v.style.transform,
fracOfHeight(rectH, y),
rect.height
);
v.style.transform = `scale(${frac <= 1 && frac >= 0 ? frac : 0})`;
} else {
v.style.transform = `scale(1)`;
}
scrollPos = document.body.getBoundingClientRect().top;
});
}
});
