Откройте страницу «О нас» в Fastry, и заголовок не стоит на месте. Он печатает слово, делает паузу, удаляет его и печатает следующее — циклически. В этом посте объясняется, как построен этот эффект, что контролирует каждое значение и как сделать его быстрее, медленнее или полностью убрать.
Где находится компонент
Весь эффект находится в одном файле:
src/components/ui/TypingEffect.astroЭто стандартный компонент Astro со встроенным <style> для мигания курсора и <script> для логики печати. Никаких сторонних библиотек или внешних зависимостей.
Как работает анимация
Компонент использует один рекурсивный цикл setTimeout — никакого setInterval. Каждый вызов tick() решает, добавлять или удалять один символ, затем планирует следующий вызов через соответствующую задержку.
Старт
└─ ожидание 600 мс (начальная задержка)
└─ tick()
├─ печать: добавить один символ, подождать typeSpeed мс
│ └─ когда слово завершено: подождать pauseAfterType мс, переключиться на удаление
└─ удаление: удалить один символ, подождать deleteSpeed мс
└─ когда пусто: подождать pauseAfterDelete мс, перейти к следующему словуНачальная задержка в 600 мс существует, чтобы анимация не начиналась во время отрисовки страницы на медленном соединении.
Свойства и их значения по умолчанию
| Свойство | По умолчанию | Что контролирует |
|---|---|---|
words | (обязательно) | Массив строк для циклического перебора |
typeSpeed | 120 | Миллисекунды между каждым печатаемым символом |
deleteSpeed | 70 | Миллисекунды между каждым удаляемым символом |
pauseAfterType | 1800 | Пауза в мс после полного набора слова |
pauseAfterDelete | 400 | Пауза в мс после полного удаления слова |
Шпаргалка по настройке
| Цель | Что изменить |
|---|---|
| Быстрее печать | Уменьшить typeSpeed (например, 120 → 60) |
| Медленнее печать | Увеличить typeSpeed (120 → 180) |
| Быстрее удаление | Уменьшить deleteSpeed (70 → 35) |
| Длиннее пауза после печати | Увеличить pauseAfterType (1800 → 3000) |
| Короче пауза между словами | Уменьшить pauseAfterDelete (400 → 150) |
| Другие слова | Изменить массив words |
| Другой символ курсора | Заменить ` |
| Удалить эффект | Заменить <TypingEffect> на простой <span> |
Доступность
Компонент оборачивает всё в <span> с aria-label, содержащим все слова через запятую. Скринридеры объявляют полный список слов из aria-label и игнорируют анимированное содержимое внутри.
Влияние на SEO
Astro рендерит заголовок на сервере, поэтому полный элемент присутствует в HTML-коде до выполнения JavaScript. Поисковые системы читают статический HTML и индексируют все слова из aria-label.