11 lines
479 B
JavaScript
11 lines
479 B
JavaScript
const clamp = (x, min, max) => Math.max(min, Math.min(x, max));
|
|
const list = document.querySelector(".list");
|
|
const cards = Array.from(document.querySelectorAll(".card"));
|
|
list.addEventListener("scroll", (e) => {
|
|
cards.forEach((card, i) => {
|
|
const scale = clamp((400 - list.scrollTop + i * 72) / 100, 0, 1);
|
|
const opacity = clamp((360 - list.scrollTop + i * 72) / 60, 0, 1);
|
|
card.style.transform = `scale(${scale})`;
|
|
card.style.opacity = `${opacity}`;
|
|
});
|
|
}); |