Анимация при прокрутке страницы (scroll reveal на CSS)

Анимация при прокрутке страницы (scroll reveal на CSS): для чего нужен

Разделы, которые появляются при прокрутке, оживляют страницу. Этот генератор создаёт эффект только на CSS, используя анимации, привязанные к прокрутке (animation-timeline: view()), без библиотек вроде AOS или ScrollReveal.

Выберите эффект (подъём, просто появление, выезд сбоку, увеличение или проявление из размытия), расстояние и точку входа в экран, где анимация заканчивается, и прокрутите предпросмотр. Код помещён в @supports, поэтому в Firefox, где эта возможность пока за экспериментальной настройкой, элементы отображаются как обычно, а не остаются невидимыми, и код учитывает тех, кто просит меньше движения.

Как пользоваться

1. Выберите эффект и расстояние.
2. Определите, где анимация заканчивается.
3. Скопируйте CSS и примените класс к разделам.

Когда использовать

• Лендинги.
• Разделы с услугами и отзывами.
• Портфолио.

Частые вопросы

Работает ли во всех браузерах?

Анимации, привязанные к прокрутке (animation-timeline), работают в Chrome, Edge и Safari 26 и новее. В Firefox они пока доступны только через экспериментальную настройку. Поэтому код помещён в @supports: где возможности нет, элементы просто отображаются как обычно и не остаются невидимыми.

Почему не использовать библиотеку вроде AOS или ScrollReveal?

Эти библиотеки используют JavaScript для отслеживания прокрутки, что утяжеляет загрузку и может тормозить на слабых телефонах. С animation-timeline анимацией занимается сам браузер, и сайт получается легче.

А что с теми, кто предпочитает меньше движения?

Код учитывает prefers-reduced-motion: у тех, кто включил эту настройку, элементы появляются без сдвига и увеличения.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты