Параллакс слоёв

Слои движутся с разной скоростью: дальние отстают, ближние опережают. Разница скоростей создаёт глубину кадра.

Скрольте вниз — сцена расслоится.

глубина

фон −0.14 титул 0.05 карточки 0.18

Три скорости в одном экране: фон отстаёт, заголовок почти на месте, карточки опережают. Прокрутите вверх-вниз и следите, как сцена расслаивается.

ещё раз

Код

<section class="scene">
  <div class="bg"    data-para="-0.14">фон (фото)</div>
  <h2   class="title" data-para="0.05">заголовок</h2>
  <div  class="cards" data-para="0.18">карточки</div>
</section>

<style>
.scene { position: relative; height: 100vh; overflow: hidden; }
.bg { position: absolute; inset: -16% 0;
  background: url(photo.jpg) center/cover; will-change: transform; }
</style>

<script>
// центр-режим: плюс = слой опережает скролл, минус = отстаёт
var items = [].map.call(document.querySelectorAll("[data-para]"), function (el) {
  return { el: el, k: +el.getAttribute("data-para"),
           scope: el.closest(".scene"), cur: NaN };
});
function loop() {
  var vh = innerHeight;
  items.forEach(function (it) {
    var r = it.scope.getBoundingClientRect();
    var target = (r.top + r.height / 2 - vh / 2) * it.k;
    if (isNaN(it.cur)) it.cur = target;
    it.cur += (target - it.cur) * 0.085;   // инерционная доводка
    it.el.style.transform = "translate3d(0," + it.cur.toFixed(2) + "px,0)";
  });
  requestAnimationFrame(loop);
}
if (!matchMedia("(prefers-reduced-motion: reduce)").matches)
  requestAnimationFrame(loop);
</script>

Промпт для ИИ

Добавь на сайт параллакс слоёв с фотографиями. Секция 100vh position:relative overflow:hidden; фоновое фото — absolute с запасом inset:-16% 0, background cover, will-change:transform. Каждому слою атрибут data-para: фон -0.14 (отстаёт), заголовок 0.05, передние карточки 0.18 (опережают). В rAF-цикле: target = (rect.top + rect.height/2 - innerHeight/2) * k, где rect — рамка СЕКЦИИ (не слоя!), и лерп current += (target-current)*0.085. Применяй translate3d. Отключай при prefers-reduced-motion.