Превью картинки за курсором при наведении на список работ

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

Список работ: название проекта слева, тип работы справа. Наведите на строку, и рядом с курсором из точки вырастает карточка с картинкой этого проекта. Она плавно следует за мышью с небольшой инерцией, а подпись «Смотреть кейс» тянется к курсору, как магнит: плашка выходит вперёд карточки, а текст внутри плашки — ещё чуть дальше, так что они движутся с разной скоростью. Если вести мышь быстро, карточка наклоняется в сторону движения, а когда мышь замирает, выпрямляется.

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

Идея — список «Recent work» на fedorchuk-vitaliy.webflow.io, а наклон — от фото в меню на allthatjazz.ltd. Здесь эффект переписан без библиотек.

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

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

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

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

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

Вручную. Каждой строке нужна скрытая картинка — её скрипт и покажет в карточке. Карточку у курсора скрипт создаёт сам:

<div class="works" data-follower-label="Смотреть кейс">
  <a data-follower-item href="/cases/jewelry/">
    Ювелирная студия <span>Сайт и каталог</span>
    <img data-follower-visual src="jewelry.jpg" alt="" hidden>
  </a>
</div>

createPreviewFollower(document.querySelector('.works'), { size: 280, tilt: 8 });

Строки остаются обычными ссылками: по клику человек переходит на страницу проекта.

Настройки

• Размер карточки — ширина превью; высота на четверть больше.
• Смена картинок — как одна картинка сменяет другую: «Сдвиг» вверх или вниз по направлению движения, «Наслоение» — новая въезжает поверх старой, а та остаётся на месте (при быстрых движениях картинки ложатся стопкой), «Затухание» — новая проявляется поверх старой, «Сразу» — мгновенная замена.
• Сдвиг картинок — насколько они уезжают при смене строки, в режимах «Сдвиг» и «Наслоение».
• Длительность смены картинок и появления карточки.
• Инерция — насколько карточка отстаёт от курсора.
• Наклон — насколько карточка наклоняется при быстром движении; 0 — всегда ровно.
• Магнит подписи — насколько плашка подписи тянется к курсору; текст внутри уходит ещё немного дальше.
• Приглушение — яркость остальных строк при наведении.

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

Карточка — чистое оформление: она скрыта от скринридеров, а строки остаются ссылками с текстом. На сенсорных экранах наведения нет, поэтому карточка не появляется, и список работает как обычный. Двигаются только transform и opacity. При настройке «Уменьшить движение» карточка не наклоняется и не плывёт, а картинки сменяются без сдвига.

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

Можно ли видео вместо картинки? Да, в [data-follower-visual] может быть <video> с автоплеем без звука.

Нужен ли GSAP? Нет: следование, наклон и смена картинок сделаны на чистом JavaScript и Web Animations API.