Дизайн и движение
33 эффекта движения, которые можно потрогать и использовать на своём сайте
Движение на сайте объясняет, отвечает и ведёт взгляд — или просто мешает. Здесь 33 живых примера: трогайте каждый, читайте, где он работает, и выбирайте, что подойдёт вашему сайту.
Илья Керпелёв9 мин чтения
Содержание
Зачем сайту движение
Движение на сайте — не украшение. Оно делает три вещи. Объясняет: откуда появилось окно и куда делся текст. Отвечает: кнопка слышит нажатие, и вы в этом уверены. И ведёт взгляд: сначала сюда, потом туда. Если эффект не делает ни одного из трёх, он лишний — каким бы красивым ни был.
Хорошее движение никто не замечает. Плохое замечают все.
Когда движение мешает
- Когда телефон ждёт. Страница грузится ради красивой анимации, и человек уходит раньше, чем её увидел. Поэтому здесь каждый тяжёлый эффект грузится, только когда вы к нему подходите.
- Когда укачивает. У части людей сильный параллакс и подмена прокрутки вызывают дурноту. Для них в системе есть настройка «уменьшить движение» — хороший сайт её уважает. Включите её, и эта статья замрёт, но останется понятной.
- Когда повторяется сто раз в день. Анимация меню, которое открываете постоянно, через неделю раздражает. Чем чаще действие, тем тише должно быть движение.
- Когда спорит с главным. Если на экране двигается всё, кнопку «Записаться» не видно. Одно сильное движение на экран — остальное тихо.
Как читать эту статью
Каждый пример ниже — живой: нажимайте, листайте, водите курсором. У каждого есть номер, место, где он работает на настоящем сайте, и метка нагрузки:
- лёгкий — телефону почти ничего не стоит
- средний — нужен аккуратный код, на телефоне упрощается
- тяжёлый — только в одном месте сайта и с облегчённой версией
Начнём с пяти самых сильных моментов — тех, после которых сайт запоминают. Потом — база: 28 эффектов, которые пригодятся почти любому сайту.
Часть 1
Эффект удивления
Начнём с самого сильного. Здесь пять таких эффектов — на самом деле их гораздо больше. Много их и не нужно: одного такого момента на сайт достаточно, чтобы его запомнили.
Эти эффекты рисует видеокарта, поэтому они не грузятся вместе со страницей — только когда вы к ним подходите. На телефоне частиц и слоёв меньше, а при «уменьшить движение» остаётся неподвижный кадр. Под каждым — что вдохновило: код чужих демо мы не брали, только идеи.
Живая ткань
тяжёлыйФон, который течёт сам по себе и тянется к курсору, как шёлк к руке. Это не видео и не картинка: каждый кадр рисует видеокарта по формуле, поэтому фон никогда не повторяется и весит почти ничего.
Фон, который дышит
Сайт начинается
с настроения
Поводите курсором — ткань потянется следом
Где применить Первый экран бренда, страница продукта, промо-запуск WebGL-шейдер
Что вдохновило Alex Harri — «A flowing WebGL gradient, deconstructed» (2025) · Awwwards — подборка WebGL-сайтов
Частицы собираются в знак
тяжёлыйТысячи точек висят облаком, а пока вы листаете, складываются в знак. Подведите курсор — точки разбегутся и вернутся. Хаос превращается в ясность прямо у вас на глазах.
Листайте медленно — из облака собирается знак
Где применить Логотип и имя бренда, запуск продукта, финал истории WebGL-частицы
Что вдохновило Codrops — «3D Typing Effects with Three.js» (2022): точки из текста через холст · Awwwards — «Interactive particle effect» (Nature beyond technology)
Линза
тяжёлыйПод курсором текст плавится, как под каплей воды. Пока курсора нет, линза бродит сама. Это один SVG-фильтр: шум и смещение пикселей, без картинок и библиотек.
Смотрите
внимательнее
Где применить Портфолио, промо, заголовок креативного сервиса SVG-фильтр
Что вдохновило Codrops — «Image Distortion Effects with SVG Filters» (2019) · Henry Hwang — «How To Distort Text With SVG»
Полёт сквозь принципы
тяжёлыйПрокрутка ведёт камеру вглубь, и мимо пролетают рамки — десять принципов хорошего движения. В конце коридора — ваш сайт. На телефоне рамок меньше, а при «уменьшить движение» это обычный список.
Смысл
Движение объясняет, а не украшает
Отклик
Интерфейс отвечает быстрее, чем успеете усомниться
Ритм
Одно сильное движение на экран
Глубина
Слои показывают, что важнее
Внимание
Взгляд идёт туда, куда ведёт движение
Скорость
Телефон не должен ждать
Тишина
Пауза важна так же, как анимация
Характер
Движение говорит голосом бренда
Забота
Если движение мешает — всё замирает
Ваш сайт
Соберём из этого то, что подойдёт вам
Где применить Презентация продукта, «как мы работаем», история бренда CSS 3D + прокрутка
Что вдохновило Codrops — «How to Build Cinematic 3D Scroll Experiences with GSAP» (2025) · GSAP — витрина сайтов с анимацией прокрутки
Шрифт чувствует руку
тяжёлыйКаждая буква полнеет, когда к ней подносите курсор или палец, и худеет, когда отводите. Это переменный шрифт: у него не два-три начертания, а плавная шкала толщины от тонкого до жирного.
Шрифт чувствует руку
Поводите курсором или пальцем по словам
Где применить Первый экран, имя бренда, интерактивный заголовок Переменный шрифт
Что вдохновило 24 ways — «Interactivity and Animation with Variable Fonts» (2019) · Awwwards — «Faire Type Variable Font Mouse Interaction»
Часть 2
База
28 эффектов, которые нужны почти любому сайту. Пять глав: текст, прокрутка, глубина, взаимодействие, интерфейс.
Текст
Начнём со слов. На любом сайте человек сначала читает, а уже потом смотрит и нажимает. Движение здесь работает как интонация: оно не меняет смысл, но подсказывает, что сказать громче.
Правило простое: одно движение на один заголовок. Если на экране двигается всё, не выделяется ничего.
Заголовок по словам
лёгкийЗаголовок не появляется целиком, а выходит слово за словом. Взгляд успевает прочитать каждое — и главный тезис запоминается, а не пролетает мимо.
Сайты · AI-агенты · автоматизация
Сайт, который понимают с первого экрана
Видите, как собирается ваш сайт.
Где применить Лендинг: первый экран, главный тезис Motion
Буквы волной
лёгкийБуквы откликаются на курсор и иногда пробегают волной. Это не про смысл, а про характер: имя бренда становится живым.
ARIE
Отвечает клиентам 24/7, записывает на встречу и сам заносит клиента в CRM.
Наведите курсор на буквы
Где применить Портфолио, имя бренда, промо-страница Motion
Шрифтовые пары
лёгкийОдна и та же фраза в четырёх парах шрифтов. Переключите — и увидите, как меняется голос сайта: строгий, дерзкий, тёплый, технический.
Услуга · лендинг
Первая версия — за 1–2 рабочих дня
Одна страница, которая ведёт к заявке. Смотрите до оплаты: понравится — запускаем, нет — ничего не платите.
Где применить Любой сайт: выбор характера на старте Motion
Счётчики
лёгкийЧисла набегают, когда блок попадает на экран. Работает, только если цифры настоящие: счётчик притягивает взгляд — и придирчивость тоже.
Kerpelev Consulting · Иерусалим
Где применить Блок «цифры», о компании, результаты Motion
Такой блок можно поставить и на ваш сайт.
Прокрутка
На телефоне главный жест — прокрутка. Её можно оставить скучной, а можно превратить в рассказ: страница отвечает пальцу, и человек сам управляет темпом.
Важно не отнимать у него контроль. Мы не перехватываем прокрутку и не тормозим её — только откликаемся.
Параллакс слоёв
среднийСлои двигаются с разной скоростью, и плоский экран получает глубину. Мера важна: чуть-чуть — красиво, слишком — укачивает.
Kerpelev Consulting · Иерусалим
История бренда
начинается с места
Где применить Портфолио, история бренда, промо Motion scroll
Sticky-сцена
среднийЭкран «прилипает», а внутри него сменяются шаги. Человек листает как обычно, а читает историю по порядку, без прыжков.
Разбор
30 минут, бесплатно: рассказываете о задаче.
Первая версия
Лендинг видите до оплаты.
Правки
Два круга правок входят в пакет.
Запуск
Запускаем, учу пользоваться, остаюсь на связи.
Где применить Лендинг: «как мы работаем», шаги услуги Motion scroll
Горизонтальная лента
среднийВертикальная прокрутка двигает ленту вбок. На компьютере это сцена, на телефоне — обычная лента, которую листаете пальцем.
Сайты под ключ
Лендинг, визитка или бизнес-сайт. Лендинг видите до оплаты.
AI-бот
Отвечает клиентам 24/7, записывает на встречу и сам заносит клиента в CRM.
Автоматизация
Заявки с сайта, WhatsApp и Telegram — в одно место, напоминания приходят сами.
Shopify
Витрина, карточки товаров, оплата и доставка — на нужных языках.
Обучающие ролики
Уроки и инструкции из ваших записей — в едином стиле.
Персональный агент
Ваш второй мозг: знает ваш бизнес и пишет в вашем стиле.
Где применить Портфолио, каталог работ, услуги Motion scroll
Карусель с привязкой
лёгкийКарусель, которая всегда останавливается ровно на карточке. Индикатор снизу догоняет на пружине — мелочь, но ощущается дорого.
Это как друг, который знает тебя с детства.
Вопросы плюс ИИ плюс корректировка закладывают фундамент
системно понимает как адаптировать AI под бизнес
сайт ощущается естественным и личным
Где применить Отзывы, магазин, галерея CSS scroll-snap + Motion
Шторка-маска
лёгкийКартинки открываются шторкой, а внутри чуть отъезжают. Так галерея перестаёт быть сеткой и становится показом.
Где применить Кейсы, галерея, фото товара Motion + clip-path
Секция меняет цвет
лёгкийФон секции перетекает из цвета в цвет вслед за прокруткой. Удобный способ перейти от «ночного» блока к «дневному» без резкой границы.
ARIE · 24/7
Ночью ARIE отвечает клиентам. Утром заявки уже в CRM.
Прокручивайте: фон перетекает из ночи в утро вслед за вами.
Где применить Длинный лендинг: переход между темами Motion scroll
Строка, которая слушает скролл
лёгкийБегущая строка ускоряется, когда листаете быстрее, и едет назад, когда листаете вверх. Строка слушает вас — и это заметно.
Прокрутите быстрее — строки ускорятся, вверх — поедут назад
Где применить Бренд, направления, анонсы Motion
Такой блок можно поставить и на ваш сайт.
Глубина и 3D
Перспектива превращает экран в пространство. Это самые эффектные приёмы — и самые тяжёлые для телефона.
Поэтому каждый эффект здесь имеет облегчённую версию: на телефоне меньше слоёв, проще физика, а при настройке «уменьшить движение» всё стоит на месте.
3D-карусель
тяжёлыйКольцо карточек в пространстве: крутится само, тянется мышью и пальцем. Эффектно, но тяжело — на телефоне карточек меньше.
Лендинг
Одна страница, которая ведёт к заявкеВизитка
До 4 страниц: кто вы и как связатьсяБизнес-сайт
До 8 страниц и блогAI-бот
Отвечает клиентам ночьюАвтоматизация
Рутина делается самаCRM
Все заявки в одном местеShopify
Магазин с оплатой и доставкойРолики
Инструкции, которые смотрятГде применить Магазин, тарифы, портфолио Motion + CSS 3D
Наклон и блик
среднийКарточка наклоняется за курсором, по ней бежит блик. Простой приём, после которого плоская плашка кажется предметом в руке.
Personal
$590
Три встречи со мной. Уходите с настроенной системой, которой умеете пользоваться.
Где применить Карточка продукта, тарифы, визитка Motion springs
Колода карточек
среднийКолода: верхнюю карточку можно смахнуть, и она уходит под низ. Хорошо для советов, шагов и отзывов — по одному за раз.
Перед разбором: что подготовить
Одна цель
Что должен сделать человек на сайте: написать, записаться или купить?Три сайта, которые нравятся
И чем именно: цветом, тоном, порядком блоков.Кто ваш клиент
Одной фразой: кто он и что его тревожит.Что уже есть
Логотип, фото, тексты, отзывы — пригодится всё.Где сейчас заявки
WhatsApp, звонки, таблица? С этого начнём автоматизацию.Свайпните или нажмите на карточку
Где применить Советы, онбординг, отзывы Motion springs
Переворот карточки
лёгкийКарточка переворачивается: с одной стороны «до», с другой — «после». Человек сам решает, когда увидеть результат, — это вовлекает. Так же работает вопрос и ответ в FAQ.
Где применить «До и после», FAQ, услуги Motion + CSS 3D
Галерея с 3D-поворотом
среднийЦентральная карточка смотрит на вас, боковые развёрнуты в глубину. Выбор из нескольких работ или стилей становится понятным с первого взгляда.
Где применить Портфолио, витрина, выбор стиля Motion + CSS 3D
Глубина при прокрутке
тяжёлыйРамки летят навстречу, пока листаете. Младший брат «Полёта сквозь принципы» из начала статьи: проще и легче, зато подходит почти любому промо.
Сценарий ARIE изнутри
100+
узлов — и каждый на своём месте
Где применить Промо, презентация продукта Motion scroll + CSS 3D
Такой блок можно поставить и на ваш сайт.
Взаимодействие
Сайт кажется живым, когда отвечает на касание и курсор. Хороший отклик никто не замечает — зато без него интерфейс кажется глухим.
Здесь всё про физику: пружины, инерция, мягкие края. Так ведут себя предметы в руке, поэтому это понятно без инструкций.
Магнитная кнопка
лёгкийКнопка тянется к курсору, когда он рядом, и мягко пружинит при нажатии. На телефоне остаётся только отклик на касание.
Бесплатный разбор
30 минут — и ясно, с чего начать
Подведите курсор поближе
Где применить Главный призыв к действию на любом сайте Motion springs
Курсор-проводник
лёгкийСвой курсор: точка и кольцо догоняют мышь, над ссылкой кольцо растёт и подписывает действие. Только для компьютера.
На телефоне курсора нет — этот эффект живёт на компьютере.
Где применить Портфолио, креативное агентство Motion springs
Список с превью
лёгкийНаводите на строку — рядом появляется превью и едет за курсором. На телефоне превью открывается по нажатию.
Где применить Портфолио, меню, список услуг Motion springs
Бросок с инерцией
среднийКарточку идеи можно бросить: она летит по инерции и мягко упирается в края доски. Физика делает интерфейс понятным без объяснений.
Где применить Конструкторы, доски идей, сортировка Motion springs
Морфинг форм
среднийОдна форма плавно перетекает в другую. Хорошо для иллюстраций, логотипа и переходов, где важна непрерывность.
Kerpelev
Круг
Где применить Логотип, заставка, иллюстрации Motion + SVG
Живые иконки
лёгкийИконки отвечают на нажатие: меню превращается в крестик, галочка рисуется, сердце вспыхивает. Мелочь, которую чувствуете пальцем.
Где применить Меню, формы, избранное, уведомления Motion + SVG
Такой блок можно поставить и на ваш сайт.
Интерфейс
Последняя глава базы — интерфейс: вкладки, окна, вопросы и ответы. Эти движения почти не замечают. Но если их убрать, сайт кажется сломанным.
Здесь движение нужно не для красоты, а чтобы человек не терял нить: откуда появилось окно, куда делся текст, где он сейчас.
Аккордеон
лёгкийОтвет раскрывается плавно, без рывка. Человек видит, откуда появился текст, и не теряет место на странице.
Частые вопросы4 ответа
Лендинг — да, первую версию покажу до оплаты.
Два круга правок входят в пакет.
Нет: тексты по вашей анкете пишет AI, потом их редактирую я.
Хостинг — без абонплаты, домен — по цене регистратора.
Где применить FAQ, прайс, условия Motion
Вкладки со скользящей подложкой
лёгкийПодложка скользит к выбранной вкладке. Глаз следит за движением и сразу понимает, где вы находитесь.
Одна страница, до 8 разделов: первый экран, услуги, обо мне, отзывы, вопросы, контакты.
Первая версия 1–2 рабочих дня · бесплатно, оплата после
До 4 страниц: главная, услуги, обо мне, контакты.
Первая версия 3–5 рабочих дней · бесплатно, оплата после
До 8 страниц и блог — для нескольких направлений и статей.
Первая версия 3–5 рабочих дней · бесплатно, оплата после
Где применить Тарифы, каталог, расписание Motion springs
Карточка раскрывается в окно
среднийКарточка вырастает в окно прямо из своего места. Так переход от списка к подробностям не теряет нить.
Где применить Команда, кейсы, товары Motion (FLIP)
Схема собирается по шагам
лёгкийСхема собирается по шагам, а потом по ней бежит сигнал. Объясняет услугу лучше абзаца текста.
Где применить Объяснение услуги: «как это работает» Motion sequence
Прогресс чтения
лёгкийТонкая полоса показывает, сколько прочитано, а подсказка — сколько осталось. На этой странице такая полоса тоже есть — посмотрите наверх.
осталось ~3 мин
Блог · инструкция
Почему длинный текст перестаёт пугать
Длинный текст пугает, когда не видно конца. Тонкая полоса сверху снимает этот страх: человек видит, сколько прочитал и сколько осталось.
Подсказка «осталось три минуты» работает так же. Она честно говорит, сколько займёт чтение, и помогает решить: дочитать сейчас или вернуться позже.
Это не украшение, а навигация.
Полоса не мешает: она тонкая, не мигает и движется ровно вместе с прокруткой.
Такой приём хорош для статей, инструкций и длинных описаний услуг — везде, где текст важнее картинок.
Прокрутите этот блок до конца — полоса заполнится, а подсказка скажет «дочитано».
Где применить Статьи, блог, длинные инструкции Motion scroll
Такой блок можно поставить и на ваш сайт.
Что взять себе
- Одно сильное движение на экран. Остальное — тихо: отклик кнопок, плавные окна, аккуратная прокрутка.
- Сначала скорость. Если телефон ждёт, эффект не работает, каким бы красивым он ни был.
- У каждого эффекта — запасной вариант. На телефоне легче, при «уменьшить движение» — неподвижно, без JavaScript — просто текст.
Сделаем так же для вашего сайта
Все 33 эффекта на этой странице мы собрали сами, без шаблонов и тяжёлых библиотек. Так же сделаем и для вас: выберем три-пять движений, которые помогают именно вашим клиентам, и не дадим им замедлить телефон.
Как это устроено: 30 минут разбора — бесплатно. Лендинг покажу до оплаты, сайт с модулями начнём после короткого созвона и предоплаты 50 %. Два круга правок входят в пакет. Потом запуск — и я остаюсь на связи.
Понравились эффекты?
Назовите ARIE их номера — подберём, что подойдёт вашему сайту.
Илья КерпелёвСтрою AI-агентов под человека. Пишу о том, что сам внедряю.