Прокрутка без захвата страницы

Результат

Вы добавите один scroll-сигнал: индикатор чтения или спокойное появление схемы в viewport. Прокрутка уже является взаимодействием пользователя, поэтому не стоит параллельно заставлять каждый блок летать, закреплять страницу и перехватывать колёсико. Нативные CSS scroll-driven timelines подходят для простых эффектов; GSAP ScrollTrigger — внешний инструмент для сложного pin/scrub-сценария, который в Laravel не нужен без отдельного решения.

Следите за причинностью: индикатор может отражать уже совершённую прокрутку, а вступительная схема — появление в области просмотра. Но эффект не должен менять порядок чтения или задерживать появление критичной информации. Особо осторожно работайте с закреплёнными блоками: на коротком экране они легко создают ощущение, что страница перестала прокручиваться.

Шаги

1. Сформулируйте смысл эффекта: «показывает, сколько прочитано» или «помогает увидеть три этапа схемы». Если смысл нельзя назвать, оставьте статичный макет.
2. Начните с простой видимой версии: прогресс-бар или все этапы схемы уже доступны в документе.
3. Для поддерживаемых браузеров привяжите маленькую CSS-анимацию к scroll() или view(). Не добавляйте JavaScript listener, пока нативного варианта достаточно.
4. Если когда-либо понадобится ScrollTrigger, ограничьте его одним разделом с явными start/end и не фиксируйте весь экран.
5. В prefers-reduced-motion: reduce отключите scrub, parallax и looping, но не прячьте информацию.

Применимый код

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

Критерий проверки

Страница читается без эффекта, навигация не залипает, а системная настройка уменьшения движения сохраняет все заголовки, кнопки и этапы схемы.

Источники

• Scroll-driven animation timelines — MDN
• ScrollTrigger — GSAP
• prefers-reduced-motion — MDN