Дизайн и конверсия

Как называется анимация на сайте?

Дмитрий, Москва 969 просмотров

Смотрю на чужие лендинги и вижу, как блоки плавно появляются и сдвигаются при прокрутке страницы вниз. Хочу заказать похожий эффект у фрилансера, но не знаю, как он называется, чтобы объяснить задачу без картинок на пальцах.

Дмитрий Акиндинов разработчик лендингов, 15 лет практики

ответил

Это называется scroll-анимация, или анимация при прокрутке - эффект, когда блок остаётся невидимым или сдвинутым в сторону, пока пользователь не долистает до него, а потом плавно встаёт на своё место. Технически чаще всего это делается через JavaScript-библиотеку вроде AOS или GSAP с модулем ScrollTrigger, либо через CSS и Intersection Observer без сторонних библиотек вообще.

Если элементы не просто появляются, а фон и передний план двигаются с разной скоростью, создавая ощущение глубины, это уже другой эффект - параллакс. Его часто путают со scroll-анимацией, но механика другая, и на мобильных его обычно отключают: он нагружает браузер и подтормаживает на слабом железе.

Фрилансеру для точной постановки задачи достаточно сказать "нужна scroll-анимация появления блоков" и показать референс - конкретный сайт с похожим эффектом. Так он сразу поймёт техническую задачу, а не будет гадать по описанию "чтобы красиво появлялось при скролле".

Из практики: анимацию стоит делать короткой, 300-500 миллисекунд, и не вешать на каждый блок подряд - если анимируется всё, эффект перестаёт считываться и просто тормозит прокрутку. И заложите поведение для тех, у кого в системе включена настройка "уменьшить движение" (prefers-reduced-motion в CSS) - часть посетителей отключает анимацию на экране по здоровью, и сайт должен это уважать.

Подробный разбор Анимации на лендинге: где помогают, а где мешают
Не нашли свой вопрос

Задайте его напрямую

Отвечаю сам, на почту, обычно в тот же день. Разбор самых частых вопросов потом попадает в этот раздел.

Похожие вопросы

Все вопросы темы "Дизайн и конверсия"

Помогу выбрать

Сомневаетесь — напишите, разберёмся за 10 минут

Расскажете про ваш бизнес и задачу — подскажу, что нужно: лендинг, многостраничник или вообще не сайт. Без обязательств, бесплатно.

Отвечаю в течение 15 минут в рабочее время (будни 11:00–20:00 МСК). Если удобнее e-mail: 9123578@gmail.com

Telegram TG MAX MAX Звонок