Пролёт сквозь фото

Фото растёт до 3.6x и растворяется — камера «пролетает» сквозь кадр к следующей сцене.

Скрольте медленно.

вариант 1 · прямой пролёт

Ниже — вариант с вращением: кадр не только растёт, но и доворачивается на 10°, полёт становится «киношнее».

вариант 2 · с вращением

И обратный пролёт: мы начинаем внутри кадра и отлетаем назад — фото «садится» в рамку. Хорош как выход из фотоблока.

кадр «сел» на место

Код

<section class="zoom-through">  <!-- 300vh, --p пишет движок -->
  <div class="stick">
    <div class="after">Контент за кадром</div>
    <img class="shot" src="photo.jpg">
  </div>
</section>

<style>
.zoom-through { position: relative; height: 300vh; }
.zoom-through .stick { position: sticky; top: 0; height: 100vh;
  overflow: hidden; background: #0c0f14; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: transform, opacity;
  /* фото растёт до 3.6x и растворяется в конце */
  transform: scale(calc(1 + clamp(0, var(--p,0), 1) * 2.6));
  opacity: calc(1 - clamp(0, calc((var(--p,0) - .72) / .22), 1)); }
.after { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  opacity: clamp(0, calc((var(--p,0) - .78) / .16), 1); }
</style>

Промпт для ИИ

Сделай пролёт сквозь фотографию: sticky-сцена 300vh с прогрессом в --p; фото на весь экран растёт transform: scale(1 + p*2.6) и с p>0.72 растворяется (opacity к 0 за 0.22 прогресса); под ним — следующий контент, который проявляется с p>0.78 с лёгким дорастанием scale 0.9→1. Ощущение полёта камеры сквозь кадр. Центр масштабирования по умолчанию центр — можно сместить transform-origin в точку «входа».