Эффект наведения для списка — плашка и сдвиг строк

Что это за эффект

Простой список: название слева, значение справа, строки разделены тонкими линиями. Под строкой с курсором снизу выезжает плашка. Когда курсор уходит, она не исчезает, а уезжает дальше вверх, поэтому при движении по списку кажется, что плашка следует за курсором. Название при этом сдвигается вправо, а значение влево, навстречу друг другу. Остальные строки по желанию приглушаются.

Где использовать

• Прайс-лист и тарифы: услуга и цена.
• Меню и навигация по разделам, список проектов в портфолио.
• Списки документов, вакансий, событий — везде, где строки ведут на отдельные страницы.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт, впишет их в вашу вёрстку и подставит ваши тексты и изображения. Ваши настройки сохранятся.

Если что-то нужно иначе, скажите агенту об этом теми же словами, что и человеку: «сделай на всю ширину экрана», «поставь под заголовком на главной», «замедли в два раза».

Вручную. Строками могут быть обычные элементы списка или ссылки:

<ul class="hover-list">
  <li data-list-row>
    <span data-list-name>Удаление фона</span>
    <span data-list-value>2 000 ₽</span>
  </li>
</ul>

createHoverList(document.querySelector('.hover-list'), { shift: 10, plate: true });

Цвет плашки задаёт CSS-переменная --list-plate у списка. Оформление строк — шрифт, отступы, линии — остаётся в ваших стилях. Скрипт добавляет только движение. Готовый код с текущими настройками дают кнопки «Скопировать код» и «Скачать код» выше.

Настройки

• Сдвиг — насколько название и значение едут навстречу.
• Длительность сдвига и скорость плашки.
• Приглушение — насколько бледнеют остальные строки; 0 оставляет их как есть.
• Плашка на фоне — можно выключить и оставить только сдвиг.

Доступность и производительность

Если строки — ссылки, фокус с клавиатуры работает так же, как наведение: плашка и сдвиг видны при переходе по Tab. Текст остаётся обычным текстом, ничего не дублируется для скринридера. При настройке «Уменьшить движение» строки выделяются без анимации.

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

Можно ли без значения справа? В каждой строке нужны оба элемента, [data-list-name] и [data-list-value]. Значение может быть, например, стрелкой.

Подойдёт ли для длинных списков? Да, на каждую строку только лёгкие обработчики наведения.