Пин-шаги

Экран пришпилен: скролл листает шаги слева и синхронно меняет картинку справа.

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

Заполните поля

Первый шаг — текст-заглушка. Активный шаг подсвечен, остальные пригашены.

Получите ссылку

Второй шаг — прогресс скролла листает шаги, картинка справа меняется синхронно.

Отправьте гостям

Третий шаг — секция отпускает страницу, когда история рассказана.

Код

<section class="pin-steps">  <!-- 320vh, --p пишет движок -->
  <div class="stick">
    <div class="left">
      <div class="step">01 — шаг</div>
      <div class="step">02 — шаг</div>
      <div class="step">03 — шаг</div>
    </div>
    <div class="right">
      <img class="shot" src="a.jpg"><img class="shot" src="b.jpg"><img class="shot" src="c.jpg">
    </div>
  </div>
</section>

<style>
.pin-steps { position: relative; height: 320vh; }
.pin-steps .stick { position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.step { opacity: calc(.25 + var(--on,0) * .75); transition: opacity .3s; }
.right { position: relative; }
.shot { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
</style>

<script>
// прогресс секции 0..1 делится на диапазоны шагов
var scene = document.querySelector(".pin-steps");
var steps = scene.querySelectorAll(".step");
var shots = scene.querySelectorAll(".shot");
function loop() {
  var r = scene.getBoundingClientRect();
  var p = Math.min(Math.max(-r.top / (r.height - innerHeight), 0), 1);
  var idx = Math.min(Math.floor(p * steps.length), steps.length - 1);
  steps.forEach(function (st, i) { st.style.setProperty("--on", i === idx ? 1 : 0); });
  shots.forEach(function (sh, i) { sh.style.opacity = i === idx ? 1 : 0; });
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>

Промпт для ИИ

Сделай пришпиленные шаги (pin-steps): секция 320vh, sticky-экран с двумя колонками — слева список шагов, справа стопка изображений (absolute друг на друге). Прогресс прокрутки секции 0..1 делится на равные диапазоны по числу шагов: активный шаг получает полную непрозрачность (остальные 0.25) и его картинка проявляется (transition opacity 0.4s). Скроллом вперёд/назад шаги листаются в обе стороны. На мобильном — обычная колонка без пина.