Инерционная доводка (scrub)

Слой не приклеен к скроллу, а догоняет его через lerp: остановились — а он ещё доезжает. Ключ к «дорогому» движению.

Резко крутните колесо и отпустите.

Обе карточки идут с одинаковой скоростью 0.25, но левая — с инерционной доводкой, а правая приклеена к скроллу намертво. Сделайте резкий рывок колесом и остановитесь: левая продолжит доезжать.

lerp 0.085 — с доводкой

без доводки

Один коэффициент вязкости меняет характер всего сайта: 0.05 — тягучий люкс, 0.12 — бодрый продукт, 1 — обычный сайт.

Код

// Инерционная доводка: слой догоняет скролл через lerp.
// Меняешь один коэффициент — меняется характер всего сайта.
var el = document.querySelector(".layer");
var scope = el.closest("section");
var cur = NaN;

function loop() {
  var vh = innerHeight;
  var r = scope.getBoundingClientRect();
  var target = (r.top + r.height / 2 - vh / 2) * 0.25;
  if (isNaN(cur)) cur = target;

  cur += (target - cur) * 0.085;
  // 0.085 — вязкость: меньше = дольше доезжает
  // 1     — доводки нет, слой приклеен к скроллу

  el.style.transform = "translate3d(0," + cur.toFixed(2) + "px,0)";
  requestAnimationFrame(loop);
}
if (!matchMedia("(prefers-reduced-motion: reduce)").matches)
  requestAnimationFrame(loop);

Промпт для ИИ

Добавь моим параллакс-слоям инерционную доводку (scrub) как на thisisstudiox.com: слой не двигается синхронно со скроллом, а догоняет целевую позицию через lerp в постоянном rAF-цикле: target = (rect.top + rect.height/2 - innerHeight/2) * коэффициент; current += (target - current) * 0.085. Эффект: после остановки скролла слой ещё полсекунды плавно доезжает. 0.085 — вязкость (меньше = плавнее), 1 = без доводки. Отключай при prefers-reduced-motion.