Редактировать материал

СОХРАНИ ВАЖНОЕ

Название

Направление Формат Статус

Коротко о главном

Markdown: ## заголовок · **жирный** · списки · код

## Результат

Вы добавите один 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, но не прячьте информацию.

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

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

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

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

### Источники

- [Scroll-driven animation timelines — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines)
- [ScrollTrigger — GSAP](https://gsap.com/docs/v3/Plugins/ScrollTrigger/)
- [prefers-reduced-motion — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/%40media/prefers-reduced-motion)

Следующий шаг Ссылка на источникСама ссылка требует интернета. Важное содержание сохраните в тексте или вложении.

Изображения, GIF, видео и PDF

До 6 файлов за одно сохранение, до 100 МБ каждый. Файлы сохраняются на компьютере.

Сохранение по кнопкеОтмена