Эффекты для сайта подбирают под задачу: hover-эффекты подсказывают, что элемент кликабельный, эффекты при прокрутке ведут взгляд по странице, остальное чаще мешает. Ниже каталог с рисками, примеры на CSS, разбор Zero Block в Tilda и проверка скорости. Подойдёт владельцу сайта на Tilda, WordPress или на коде.
Какие эффекты для сайта бывают и зачем они нужны
Я делю эффекты для сайта на две группы. Первые помогают человеку: показывают, что кнопка нажимается, форма отправилась, ниже есть ещё контент. Вторые украшают, и с ними я осторожен: каждый лишний эффект нагружает браузер и отвлекает от предложения. Ниже основные эффекты для сайта, где они к месту и чем рискуют.
| Эффект | Где уместен | Чем рискует |
|---|---|---|
| Смена цвета при наведении | Кнопки, карточки, ссылки | На телефоне наведения нет |
| Появление блоков при скролле | Лендинги, кейсы, отзывы | Спрятанный первый экран отрисуется позже |
| Параллакс фона | Обложка кофейни или салона | Укачивает, грузит слабые телефоны |
| Фиксация элемента | Кнопка «Записаться», меню | Закрывает текст на маленьком экране |
| Счётчики цифр | Выпускники онлайн-школы | Пусто, если цифры нечем подтвердить |
| Индикатор отправки | Формы заявки, оплата | Почти без риска |
| Увеличение фото | Каталог магазина, портфолио | Двигает соседей, если менять ширину |
| Раскрытие по клику | Прайс, частые вопросы | Прыжки вёрстки при анимации высоты |
Анимация для сайта: примеры удобно смотреть у конкурентов в своей нише и в разборе трендов веб-дизайна. Салону красоты хватает двух-трёх эффектов для сайта на страницу. У онлайн-школы с длинным лендингом их больше, но каждый должен что-то объяснять.
Hover-эффекты, анимация кнопок и эффекты при прокрутке на CSS
Большинство эффектов для сайта делается на чистом CSS. Правило из руководства web.dev: анимируйте transform и opacity. Их браузер меняет на этапе композиции и не пересчитывает раскладку. Если двигать блок через top, left, width или margin, вёрстка считается заново каждый кадр, и движение дёргается.
Кнопка приподнимается при наведении и проседает при нажатии:
.btn { transition: transform .2s ease; }
@media (hover: hover) {
.btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: scale(.97); }Медиазапрос (hover: hover) проверяет, умеет ли устройство наводить курсор. MDN отмечает, что многие телефоны имитируют наведение долгим тапом, и без проверки эффект всплывёт не к месту.
Появление блока при скролле:
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .5s, transform .5s;
}
.reveal.is-visible { opacity: 1; transform: none; }Класс is-visible добавляет пара строк скрипта на IntersectionObserver. Такие эффекты для сайта вешайте на блоки ниже первого экрана, обложку показывайте сразу.
Когда для эффектов нужна библиотека
Если эффекты для сайта описываются словами «при наведении», «при клике» или «один раз при появлении», хватит CSS. Библиотека нужна, когда анимация идёт за прокруткой шаг за шагом или в сцене много согласованных элементов.
GSAP с плагином ScrollTrigger берут для сцен на прокрутке: закрепить блок, проиграть внутри него шаги. Библиотека принадлежит Webflow и с 30 апреля 2025 года бесплатна целиком, с бывшими платными плагинами, в том числе для коммерции.
Motion (раньше Framer Motion) нужна сайтам на React: анимации привязаны к состоянию компонентов. На конструкторе вы с ней не столкнётесь.
AOS (Animate On Scroll) самая простая: подключили стили и скрипт, дали блоку атрибут data-aos со значением fade-up, и он появляется при прокрутке. Последняя версия пакета в npm вышла несколько лет назад, поэтому я сначала пробую обойтись CSS.
Любой скрипт весит и выполняется в основном потоке. Когда эффекты для сайта собраны на трёх библиотеках сразу, страница дольше отвечает на клики.
Эффекты в Tilda и WordPress без кода
В Tilda эффекты для сайта настраиваются в Zero Block. По справке Тильды, режимов два. Базовая анимация даёт появление (Fade In, с разных сторон, Zoom In), параллакс на сайте по скроллу или по движению мыши и фиксацию. Пошаговая запускается по одному из пяти событий: элемент на экране, блок на экране, прокрутка, наведение, клик. В шаге задаются сдвиг, масштаб, прозрачность, поворот, длительность и задержка. Если включить пошаговую, базовые настройки элемента сбросятся.
Это готовые анимации для сайта, которые собираются мышкой, но перестараться легко: десяток слоёв с параллаксом старый телефон может не вытянуть. Как собрать сам проект, рассказал в инструкции как сделать сайт на Тильде.
На WordPress эффекты для сайта приходят из темы, конструктора страниц или плагина. Посмотрите, что он подключает: бывает, ради одного появления блока на каждую страницу грузится целая библиотека.
Как эффекты для сайта влияют на скорость и Core Web Vitals
Неудачные эффекты для сайта задевают все три метрики Core Web Vitals.
LCP, отрисовка главного элемента. Если обложку спрятать через opacity: 0 и показывать скриптом, отрисовку засчитают только когда она станет видна. В руководстве web.dev по LCP скрытый элемент назван причиной задержки.
CLS, сдвиги вёрстки. Хорошо 0,1 и ниже. web.dev советует менять размер через transform: scale(), положение через transform: translate(). Сдвиги в течение 500 мс после клика не учитываются, прыжки при загрузке учитываются.
INP, отклик на действия. Хорошо 200 мс и меньше. Прокрутку и наведение INP не измеряет, клики и тапы измеряет, а тяжёлые скрипты анимаций их тормозят.
Людям с вестибулярными нарушениями движение мешает: MDN пишет, что масштабирование и панорамирование крупных объектов вызывает дискомфорт. В Windows, macOS, iOS и Android есть настройка уменьшения анимации, CSS видит её через prefers-reduced-motion. Работает во всех основных браузерах с января 2020 года. Поэтому любые эффекты для сайта смягчайте, когда в системе включено уменьшение анимации.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}Чек-лист, по которому я проверяю эффекты для сайта перед публикацией:
- У каждого эффекта есть задача: подсказка, отклик или порядок чтения.
- Анимируются только
transformиopacity. - Первый экран виден сразу.
- Наведение обёрнуто в
(hover: hover). - Есть правило
prefers-reduced-motion. - Страница проверена в PageSpeed Insights до и после, на мобильной версии.
Как техника страницы связана с поиском, писал в статье про продвижение сайта.
Частые вопросы
Какие эффекты для сайта нужны лендингу в первую очередь?
Наведение и нажатие на кнопках, индикатор отправки формы и появление блоков ниже первого экрана. Параллакс добавляют, когда есть что показать: продукт или портфолио.
Тормозит ли сайт от анимации кнопок?
Кнопки редко виноваты: с transform и opacity нагрузка маленькая, чаще тормозят тяжёлые эффекты для сайта на прокрутке. Тормозит смена ширины и тяжёлых теней на каждом кадре, а ещё библиотека ради одной кнопки.
Где взять готовые анимации для сайта?
В Zero Block у Tilda, в пресетах AOS, в примерах GSAP. web.dev для копирования CSS-анимаций советует сборник Animista. Пресет всё равно проверяйте по чек-листу.
Влияют ли эффекты для сайта на SEO?
Напрямую нет. Влияние идёт через скорость: если эффект задерживает первый экран или двигает вёрстку, это видно в Core Web Vitals.
Что сделать на этой неделе
Выпишите все эффекты для сайта на главной странице и напротив каждого поставьте задачу. Где задачи нет, уберите. Прогоните страницу через PageSpeed Insights, добавьте prefers-reduced-motion, снимите появление с первого экрана и сравните отчёт.
Если не хочется разбираться самому, настрою под ключ. Сайт на отлаженном шаблоне стоит 20 000 ₽ и запускается за 3-7 дней. Пакет «Базовый+» с нешаблонным дизайном, анимацией и 3D-элементами стоит 35 000-50 000 ₽, срок 3-10 дней. Подробности на странице создания сайтов, для одной продающей страницы есть лендинг под ключ.