Что входит в набор
Пять эффектов для меню, ссылок и кнопок. Включаются атрибутом на элементе, и их можно смешивать на одной странице:
- Перекат слова (
data-word-roll) — слово уезжает вверх, а снизу выкатывается его бледная копия.
- Перетекание букв (
data-char-roll) — то же самое, но буквы уезжают по очереди с небольшой задержкой, и слово «перетекает».
- Подчёркивание (
data-underline) — линия прорисовывается под текстом слева направо, а когда курсор уходит, уезжает вправо. При быстром наведении она не скачет.
- Кнопка со стрелкой (
data-arrow-button) — квадрат со стрелкой уезжает вправо, а надпись плавно встаёт по центру кнопки.
- Кнопка-колесо (
data-wheel-button) — надпись уезжает по дуге большого колеса под кнопкой, а на её место приезжает копия.
Где использовать
Перекат и подчёркивание подходят для главного меню, ссылок в подвале и навигации по разделам. Кнопки со стрелкой и колесом — для главных призывов к действию: «Смотреть проекты», «Оставить заявку». Лучше выбрать один-два эффекта на сайт и использовать их последовательно, тогда интерфейс выглядит цельным.
Как добавить на сайт
Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт, впишет их в вашу вёрстку и подставит ваши тексты и изображения. Ваши настройки сохранятся.
Если что-то нужно иначе, скажите агенту об этом теми же словами, что и человеку: «сделай на всю ширину экрана», «поставь под заголовком на главной», «замедли в два раза».
Вручную. Поставьте атрибуты на нужные элементы и вызовите функцию для общего контейнера, например для всей страницы:
<nav>
<a data-word-roll href="/services/">Услуги</a>
<a data-underline href="/contacts/">Контакты</a>
</nav>
<a class="button" data-arrow-button href="/projects/">
<span data-arrow-label>Смотреть проекты</span>
<span data-arrow-square>→</span>
</a>
createLinkHover(document.body, { wordDuration: 300, lineDuration: 600 });
Для переката внутри ссылки должен быть только текст. Копию слова скрипт рисует через text-shadow, поэтому разметка остаётся одной строкой текста. Код можно взять для всего набора кнопками под примером или для одного эффекта — через шестерёнку рядом с его названием.
Настройки
У каждого эффекта своя длительность. Дополнительно настраиваются яркость копии слова, задержка между буквами, угол поворота колеса и задержка его копии, толщина подчёркивания в долях размера шрифта.
Доступность
Фокус с клавиатуры работает так же, как наведение: эффект виден при переходе по Tab. Текст ссылок не дублируется в разметке, поэтому скринридер читает его один раз. При настройке «Уменьшить движение» анимации отключаются.
Частые вопросы
Можно ли ставить на <button>? Да, атрибуты работают и на ссылках, и на кнопках.
Нужно ли подключать все пять эффектов? Скрипт один на весь набор, неиспользуемые эффекты просто не включаются.
