ValyroUI English version

Двадцать четыре эффекта прокрутки

Двадцать четыре эффекта прокрутки для React: появление, параллакс, полоса прогресса чтения, липкие карточки стопкой, горизонтальная секция, заливка текста — ScrollEffect на scroll-driven таймлайнах и лёгкие варианты для машин без GPU. Семь пресетов бесплатны в valyro-ui, ещё семнадцать — в Pro.

Появление при прокрутке

  • Fade in (fade-in) — Простое проявление при входе в кадр: текст, спокойные разделы
  • Fade up (fade-up) — Чуть поднимается и проявляется: надёжный выбор для карточек и блоков
  • Slide in (slide-in) — Въезжает со стороны начала строки: списки, таймлайны
  • Scale in (scale-in) — Вырастает на место: показатели, цифры, кнопки действия
  • Blur in (blur-in, Pro) — Проступает из мягкого размытия: фото, текст hero
  • Flip up (flip-up, Pro) — Поднимается в 3D от нижнего края: карточки возможностей
  • Clip up (clip-up, Pro) — Маска открывает его снизу вверх: картинки, заголовки
  • Rotate in (rotate-in, Pro) — Ложится на страницу с лёгким поворотом: отзывы, заметки
  • Settle (settle, Pro) — Опускается на место из чуть большего размера: обложки, фото товаров

Вслед за прокруткой

  • Progress bar (progress) — Заполняется с прокруткой контейнера: прогресс чтения статей и документации
  • Parallax (parallax) — Плывёт навстречу прокрутке: картинки в рамке, фоны
  • Parallax layers (parallax-layers, Pro) — Каждый слой на своей глубине: hero-сцена с небом, холмами и заголовком
  • Image zoom (image-zoom, Pro) — Картинка отдаляется внутри рамки, пока проходит экран
  • Stacking cards (stack, Pro) — Липкие карточки отступают, когда их накрывает следующая: шаги, тарифы, возможности
  • Horizontal scroll (horizontal, Pro) — Секция закрепляется, а лента едет вбок: галереи, хронологии, кейсы
  • Text fill (text-fill, Pro) — Текст заливается строка за строкой по мере чтения: манифесты, цитаты
  • Drift (drift, Pro) — Крупный заголовок едет вбок вместе с прокруткой
  • Tilt (tilt, Pro) — Наклонён назад на входе, ровный в центре, вперёд на выходе
  • Spin (spin, Pro) — Поворачивается, проходя экран: значки, стикеры, декор

Уход при прокрутке

  • Fade out (fade-out) — Гаснет, уходя наверх: подсказки, текст hero
  • Lift out (lift-out, Pro) — Поднимается и гаснет на выходе
  • Recede (recede, Pro) — Отступает вглубь страницы, уходя
  • Blur out (blur-out, Pro) — Расплывается, уходя
  • Clip out (clip-out, Pro) — Маска закрывает его снизу вверх

ScrollEffect