Fastry использует нативные веб-анимации без тяжелых библиотек. Всё построено на Intersection Observer API, CSS-переходах и View Transitions API.
Плавные появления (Fade-in Animations)
Элементы на страницах появляются плавно при прокрутке с помощью Intersection Observer. Компонент FadeIn находится в src/components/effects/ и оборачивает любой HTML или компонент Astro:
<FadeIn>
<h2>Этот заголовок появится плавно</h2>
</FadeIn>Компонент использует нативный Intersection Observer — без дополнительных библиотек. Каждый элемент анимируется один раз при первом появлении в области видимости.
Настройка анимации
Компонент FadeIn принимает пропсы для настройки:
<FadeIn direction="up" duration={600} delay={100} threshold={0.2}>
<p>Контент с кастомной анимацией</p>
</FadeIn>direction— направление:up,down,left,right,noneduration— длительность в мсdelay— задержка в мсthreshold— порог видимости (0–1)
View Transitions API
Fastry использует View Transitions API для плавной навигации между страницами. Переходы настроены в BaseLayout.astro:
---
import { ViewTransitions } from 'astro:transitions';
---
<!doctype html>
<html lang="ru">
<head>
<ViewTransitions />
</head>
</html>Навигация между страницами происходит с кросс-фейдом, что создаёт ощущение нативного приложения. Цветовой режим и тема сохраняются при переходах.
Эффект печатающего текста в Hero
Компонент TypingEffect в шапке Hero создаёт эффект печатающегося текста. Он циклически перебирает фразы с эффектом пишущей машинки:
<TypingEffect
words={["Быстро", "Современно", "Адаптивно"]}
typeSpeed={80}
deleteSpeed={40}
pauseDuration={2000}
/>Компонент написан на чистом TypeScript без зависимостей.
Индикатор прокрутки
В шапке может отображаться индикатор прогресса прокрутки — тонкая цветная полоса, показывающая, как далеко пользователь продвинулся по странице. Включается пропсом showScrollProgress на компоненте Header.
Кольцо прогресса
Для более визуального подхода доступно кольцо прогресса, которое отображает прогресс прокрутки в виде кольцевого индикатора.
Все анимации отключаются при prefers-reduced-motion: reduce, что обеспечивает доступность для пользователей с чувствительностью к движению.