Премиальные анимации без лишнего веса

Коллекция лёгких UI-эффектов: плавное появление блоков и текста, аккуратный hover, зум изображений, слайдер «до/после» и плавный скролл — всё на CSS-transitions, без тяжёлых библиотек.

Смотреть примеры До / После

Заголовок и текст: появляются при загрузке через opacity + translateY + blur — более мягкий вариант фейда, который выглядит дороже простого fade-in.

01 · Hover-эффекты

Карточки с аккуратной реакцией

Лёгкий подъём, тень и микроповорот иконки при наведении — без резких скачков.

Как это работает: анимируются только transform и box-shadow — свойства, не вызывающие пересчёт layout (reflow), поэтому эффект не "тормозит" даже на слабых устройствах.

✦

Плавное появление

Блоки появляются при скролле через IntersectionObserver — без нагрузки на CPU.

⌁

Hover на кнопках

Тонкий подъём, тень и смена цвета вместо резкого «мигания».

◎

Зум изображений

Лёгкое масштабирование 1.0 → 1.08 с контролем overflow в контейнере.

▤

Мобильное меню

Бургер-меню с плавным выездом и затемнением фона.

02 · Изображения

Галерея с эффектом приближения

При наведении изображение немного увеличивается, а подпись плавно появляется снизу.

Как это работает: контейнер имеет overflow:hidden, а само изображение масштабируется через transform:scale(1.08) — масштаб умеренный, чтобы не "вылезать" за пределы карточки и не выглядеть дёшево.

Горный пейзаж

Архитектура

Природа

03 · Сравнение

Слайдер «До / После»

Тяните за кружок или ползунок ниже, чтобы сравнить два изображения.

Как это работает: верхнее изображение обрезается через clip-path: inset(), позиция границы синхронизирована и с drag (pointer events), и с ползунком <input type="range"> — удобно и на десктопе, и на мобильном.

ДО

ПОСЛЕ

05 · 3D Tilt

Карточки с наклоном за курсором

Карточка слегка наклоняется в направлении мыши, создавая ощущение объёма без лишнего "эффекта присутствия".

Как это работает: позиция курсора в пределах карточки пересчитывается в угол наклона (макс. ±6°) через transform: rotateX/rotateY. Расчёт лёгкий, но на реальных проектах рекомендуется вызывать через requestAnimationFrame для максимальной плавности.

◆

Tilt карточка 1

Наведите и двигайте курсор — наклон следует за позицией.

◆

Tilt карточка 2

Эффект мгновенно возвращается в нейтральное положение.

◆

Tilt карточка 3

Подходит для preview-карточек продуктов или портфолио.

06 · Цифры

Анимированные счётчики

Числа плавно "накручиваются" от нуля до финального значения, когда блок попадает в зону видимости.

Как это работает: тот же IntersectionObserver запускает requestAnimationFrame-цикл, который интерполирует число по easing-функции (easeOutCubic) — движение замедляется к концу, что выглядит естественнее линейного счёта.

Проектов

% довольных клиентов

Лет опыта

Выполненных задач

07 · FAQ

Аккордеон с плавным раскрытием

Вопросы-ответы, где высота блока анимируется вместо мгновенного show/hide.

Как это работает: max-height анимируется через transition, а реальное значение высоты берётся из scrollHeight элемента в момент открытия — это позволяет контенту разной длины корректно раскрываться.

Нет — все эффекты построены на CSS-transitions/transform и опциональном requestAnimationFrame, без тяжёлых библиотек. Это не блокирует основной поток и не "тормозит" скролл.

Да, все эффекты адаптивны. Hover-состояния на тач-экранах просто не активируются (это нормальное поведение), а scroll-reveal, аккордеон, табы и слайдер работают одинаково хорошо.

Добавлена поддержка prefers-reduced-motion — пользователям, отключившим анимации в системных настройках, все эффекты показываются мгновенно, без движения.

08 · Переключение контента

Табы с плавным фейдом

Контент под активной вкладкой меняется с лёгким фейдом и сдвигом, а не скачком.

Как это работает: подчёркивание активного таба анимируется через scaleX на псевдоэлементе ::after, а содержимое панели — через короткий opacity + translateY при каждом переключении.

Этот блок демонстрирует, как можно плавно переключать содержимое без перезагрузки страницы или резких скачков вёрстки.

Скорость, лёгкость для CPU, отсутствие внешних зависимостей и полная совместимость с современными браузерами.

Чистый CSS (transitions, transform, clip-path) и немного vanilla JavaScript — без фреймворков и анимационных библиотек.

09 · Индикаторы

Прогресс-бары, заполняющиеся при скролле

Полоски прогресса "заполняются" плавно, когда блок появляется в вьюпорте — хорошо для навыков, статистики или загрузок.

Как это работает: начальная ширина 0%, а финальное значение берётся из data-percent и устанавливается только после срабатывания IntersectionObserver — это и запускает CSS transition по width.

Design92%

Frontend87%

Performance96%

10 · Дополнительные кнопки

Ripple и «магнитная» кнопка

Два менее типичных, но приятных микровзаимодействия для кнопок.

Ripple: по клику генерируется временный span-кружок в точке клика, который масштабируется и исчезает (CSS keyframes), после чего удаляется из DOM. Magnetic: кнопка слегка "тянется" к курсору в пределах своей области через небольшой translate, рассчитываемый от позиции мыши.

11 · Призыв к действию

Готовы добавить эти эффекты на свой сайт?

CTA-кнопка с аккуратной пульсирующей тенью — привлекает внимание, но не раздражает.

Как это работает: анимируется только box-shadow через keyframes, который расширяется и исчезает — при hover пульсация приостанавливается (animation-play-state:paused), чтобы не мешать чтению текста кнопки.

Начать заново ↑