Видео по скроллу

Видео приколото к экрану и проматывается прокруткой — вперёд и назад. Их компонент ScrollVideo.

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

видео проматывается скроллом · вперёд и назад

Код

<section class="video-scene">  <!-- высота 300vh -->
  <div class="stick">
    <video muted playsinline preload="auto" src="clip.mp4"></video>
  </div>
</section>

<style>
.video-scene { position: relative; height: 300vh; }
.video-scene .stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.video-scene video { width: 100%; height: 100%; object-fit: cover; }
</style>

<script>
var scene = document.querySelector(".video-scene");
var video = scene.querySelector("video");
var cur = NaN;
function loop() {
  var r = scene.getBoundingClientRect();
  var t = Math.min(Math.max(-r.top / (r.height - innerHeight), 0), 1);
  if (isNaN(cur)) cur = t;
  cur += (t - cur) * 0.1;                     // доводка — плавный ход
  if (video.duration) {
    video.currentTime = cur * (video.duration - 0.05);
  }
  requestAnimationFrame(loop);
}
if (!matchMedia("(prefers-reduced-motion: reduce)").matches)
  requestAnimationFrame(loop);
</script>

Промпт для ИИ

Сделай видео, проматываемое скроллом, как ScrollVideo на jobyaviation.com: секция 300vh со sticky-экраном, внутри video (muted, playsinline, preload=auto, object-fit:cover). В rAF считай прогресс секции t = clamp(-rect.top/(rect.height-innerHeight),0,1) с лерп-доводкой 0.1 и ставь video.currentTime = прогресс * (duration - 0.05). Видео должно быть с частыми кейфреймами (перекодируй ffmpeg -g 15), иначе перемотка дёргается. При prefers-reduced-motion просто autoplay loop.