Скролл-масштаб

Медиа-карточка дорастает до полного размера, пока проезжает экран.

Скрольте и следите за размером.

Карточка дорастает от 90% до 100%, пока проезжает вьюпорт, — как большие медиа на страницах Apple.

Код

<div class="grow-card"><img src="photo.jpg"></div>

<script>
var cards = document.querySelectorAll(".grow-card");
function loop() {
  var vh = innerHeight;
  cards.forEach(function (card) {
    var r = card.getBoundingClientRect();
    if (r.bottom < 0 || r.top > vh) return;
    var p = Math.min(Math.max((vh - r.top) / (vh * 0.8), 0), 1);
    var s = 0.9 + 0.1 * (1 - Math.pow(1 - p, 2));  // ease-out
    card.style.transform = "scale(" + s.toFixed(3) + ")";
  });
  requestAnimationFrame(loop);
}
if (!matchMedia("(prefers-reduced-motion: reduce)").matches)
  requestAnimationFrame(loop);
</script>

<style>.grow-card { will-change: transform; border-radius: 26px; overflow: hidden; }</style>

Промпт для ИИ

Сделай фотокарточкам скролл-масштаб в стиле Apple: пока блок едет снизу к центру вьюпорта, он дорастает от scale(0.9) до scale(1). В rAF: p = clamp((innerHeight - rect.top) / (innerHeight * 0.8), 0, 1); scale = 0.9 + 0.1 * (1 - (1-p)^2). will-change:transform, скругление и overflow:hidden на карточке. Считай только в кадре, отключай при prefers-reduced-motion.