Фото в буквах + параллакс

Буквы-окна: фотография едет внутри заголовка при прокрутке — background-position от прогресса.

Скрольте сквозь сцену.

ФЬОРД

фото едет внутри букв при прокрутке

Код

<section class="scene" data-scrub>  <!-- 260vh, --p пишет движок -->
  <div class="stick">
    <h1 class="photo-word">ГОРЫ</h1>
  </div>
</section>

<style>
.scene { position: relative; height: 260vh; }
.scene .stick { position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; }
.photo-word {
  font-size: 19vw; font-weight: 800; letter-spacing: -.04em;
  background-image: url(photo.jpg);
  background-size: cover;
  /* параллакс: позиция фона привязана к прогрессу скролла */
  background-position: 50% calc(20% + clamp(0, var(--p, 0), 1) * 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>

Промпт для ИИ

Сделай фото в буквах с параллаксом: sticky-сцена 260vh с прогрессом в --p; огромный жирный заголовок с background-image + background-clip:text + color:transparent; background-position-y считается из прогресса: calc(20% + p*60%) — при прокрутке фотография едет ВНУТРИ букв, буквы работают как окна. Обратный скролл везёт кадр назад. Вес шрифта 800+, отрицательный letter-spacing — чем толще буквы, тем больше видно фото.