Параллакс-окно фото

Фото больше своей рамки и отстаёт от неё при прокрутке. Тот самый эффект «фото движется медленнее фона».

Скрольте и смотрите внутрь рамок.

Фото на 30% выше своей рамки и сдвинуто вверх. Рамка стоит в потоке страницы, а фото внутри отстаёт от скролла — и появляется глубина. Рецепт 4wide.jp: обёртка + запас по высоте.

Работает с любым количеством окон на странице — расчёт идёт только для видимых.

Код

<!-- рецепт 4wide.jp: фото больше своего окна и отстаёт от него -->
<div class="img-window">
  <img class="img-inner" src="photo.jpg" alt="">
</div>

<style>
.img-window { position: relative; overflow: hidden;
  aspect-ratio: 16/9; border-radius: 22px; }
.img-inner { position: absolute; left: 0; width: 100%;
  height: 130%; top: -15%;          /* запас 30% для движения */
  object-fit: cover; will-change: transform; }
</style>

<script>
var imgs = document.querySelectorAll(".img-inner");
function loop() {
  var vh = innerHeight;
  imgs.forEach(function (img) {
    var r = img.parentElement.getBoundingClientRect();
    if (r.bottom < 0 || r.top > vh) return;
    var p = (r.top + r.height / 2 - vh / 2) / vh;
    img.style.transform = "translate3d(0," + (p * r.height * 0.24) + "px,0)";
  });
  requestAnimationFrame(loop);
}
if (!matchMedia("(prefers-reduced-motion: reduce)").matches)
  requestAnimationFrame(loop);
</script>

Промпт для ИИ

Сделай моим фотографиям параллакс-окно как на 4wide.jp: контейнер overflow:hidden с aspect-ratio 16/9 и скруглением; фото внутри position:absolute, height:130%, top:-15% (запас 30%), object-fit:cover, will-change:transform. В rAF-цикле сдвигай фото translate3d(0, p * высота_контейнера * 0.24, 0), где p = (rect.top + rect.height/2 - innerHeight/2) / innerHeight. Фото движется медленнее рамки — глубина внутри окна. Пропускай расчёт вне вьюпорта, отключай при prefers-reduced-motion.