Обсудить проект
лаборатория 6 приёма без библиотек всё работает вживую

Лаборатория

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

Обсудить проект Услуги

Движение на сайте — не украшение, а способ объяснить. Оно показывает, что с чем связано, куда всё едет и что только что изменилось. Всё остальное движение мешает: замедляет загрузку, отвлекает от чтения и через неделю начинает раздражать самого владельца сайта.

Поэтому каждый приём здесь снабжён не восторгом, а ценой. Три вещи, которые мы проверяем до того, как что-то анимировать: сколько это весит, работает ли без скрипта и что увидит человек, включивший в системе «уменьшить движение».

01

Появление и параллакс по скроллу

Блоки проявляются и смещаются по мере прокрутки. Ни одной строки JavaScript.

блок 01Появление
блок 02Смещение
блок 03Масштаб
Как сделано
CSS scroll-driven animations: animation-timeline: view(). Браузер считает прогресс сам, в потоке композитора — основной поток свободен, кадры не проседают даже на слабом телефоне.
Цена
0 КБ
Ограничения
Не поддерживается в Safari до 26 и в старых браузерах — там блок просто виден сразу. Это правильное поведение отката: содержимое не должно зависеть от анимации.
Где уместно
Везде. Это замена библиотекам появления, которые тянут 30–60 КБ ради того же эффекта.
02

Секвенция кадров на скролле

Объект «крутится» от прокрутки: кадры, нарезанные из видео, перелистываются вместе со скроллом.

Прокручивайте страницу — кадр меняется вместе со скроллом

Как сделано
Кадры грузятся заранее и рисуются в <canvas>; номер кадра считается от положения блока в окне. Здесь 24 кадра — в боевом варианте их 60–180.
Цена
100 КБ на 24 кадров
Ограничения
Главная цена — вес. 120 кадров даже по 40 КБ это почти 5 МБ, и они нужны до того, как человек доскроллит. Лечится ленивой подгрузкой диапазонами и уменьшением кадра. Альтернатива — обычное видео с перемоткой: один файл легче, но на iOS капризнее.
Где уместно
Товар, который нужно рассмотреть со всех сторон: техника, украшения, автомобиль, упаковка. Не для страницы услуг.
03

Спутник курсора

Метка следует за курсором с задержкой и меняет вид над ссылками.

Наведите курсор. Метка догоняет его с задержкой, а над ссылкой увеличивается.

На устройстве без курсора приём выключен — так и должно быть.

Как сделано
Позиция сглаживается интерполяцией в requestAnimationFrame, смещение через translate3d — свойство, которое не вызывает пересчёт раскладки.
Цена
~1 КБ
Ограничения
На тач-устройствах курсора нет вовсе — а это больше половины трафика, значит приём обязан быть необязательным. Отключается при prefers-reduced-motion: для части людей такое движение — это плохое самочувствие, а не «вау».
Где уместно
Портфолио, промо, витрины. На сайте услуг мешает читать.
04

Магнитная кнопка

Кнопка тянется к курсору на подлёте и возвращается на место.

Как сделано
Смещение считается от расстояния до центра и ограничивается по модулю. Возврат — той же кривой, что и весь сайт: cubic-bezier(0.22, 0, 0, 1).
Цена
~0,6 КБ
Ограничения
Смещать можно на 6–10 пикселей, не больше: кнопка, убегающая от пальца, — это не игривость, а промах мимо цели.
Где уместно
Один главный призыв на странице. Две магнитные кнопки рядом — уже балаган.
05

Заголовок по словам

Строки заголовка выезжают снизу, одна за другой.

Движение, которое ничего не весит

Как сделано
Слова оборачиваются в span скриптом и получают сдвиг задержки. Разметка в исходнике остаётся цельной — поисковик и экранный диктор видят обычный заголовок.
Цена
~0,8 КБ
Ограничения
Разбивать по буквам не стоит: диктор начнёт читать по одной. По словам — безопасно.
Где уместно
Первый экран. Ровно один раз на страницу.
06

Смена кадра под шторкой

Изображение раскрывается из-под движущейся полосы, а не проявляется прозрачностью.

до / послеШторка
Как сделано
Анимируется clip-path — работает на композиторе, без перерисовки слоя.
Цена
0 КБ
Ограничения
Требует, чтобы под шторкой было что показывать: на пустом блоке приём выглядит как ошибка загрузки.
Где уместно
Работы, обложки, до/после.

Правила

Чего мы
не делаем

Список короче, чем кажется, но он жёсткий.

  1. 01

    Анимация вместо содержимого

    Текст, который виден только после срабатывания скрипта, — это текст, которого нет для поисковика и для человека с отключённым JavaScript.

  2. 02

    Движение без выключателя

    Системная настройка «уменьшить движение» обязана выключать всё. Для части людей вестибулярная реакция на анимацию — медицинский факт.

  3. 03

    Мегабайты ради эффекта

    Секвенция на 5 МБ убивает первый экран на мобильном интернете. Эффект, который стоит дороже заявки, не окупается.

  4. 04

    Захват скролла

    Страница, которая перехватывает прокрутку и ведёт человека «как надо», — самый быстрый способ его потерять.

  5. 05

    Анимация на анимации

    Когда движется всё, не выделено ничего. На экране одновременно живёт один смысловой акцент.

  6. 06

    Библиотека ради одного эффекта

    Подключать 60 КБ ради появления блоков незачем: то же самое делает CSS, причём быстрее.

Первый шаг

Оживим
ваш проект?

Расскажите, что нужно оживить и зачем. Предложим приём под задачу и назовём цену — в часах и в килобайтах.

Отправить заявку Смотреть прайс
Позвонить Telegram Заявка