Какой бывает анимация
Появление при прокрутке
Заголовки и карточки проявляются, когда до них доходит взгляд. Это база, она входит в любой заказ.
Пролёты камеры между блоками
Прокрутка управляет видео: камера въезжает в кадр и переносит посетителя в следующую сцену. Так сделаны этот сайт и пример NOCTA.
Отклик на действия
Кнопки, карточки и ссылки отзываются на наведение и нажатие. Мелочь, но из-за неё сайт ощущается дорогим.
Кинетическая типографика
Буквы двигаются, собираются в слова, меняют начертание. Хорошо работает у дизайнеров и креативных студий, как в примере Habart.
3D и WebGL
Объёмные сцены и частицы, которые реагируют на мышь и прокрутку. Выглядит эффектнее всего, но и нагружает телефон сильнее остального. Подробнее — на отдельной странице.
Примеры с анимацией
В каждом примере своя анимация. Откройте пару и прокрутите — это быстрее любого описания.
Открыть сайт ↗NOCTA
ВидеопродакшнКинематографичные видеофоны и переход «в объектив» при прокрутке.
Открыть сайт ↗Habart
Моушн-дизайнерКинетическая типографика и интерактивные стикеры в ярком стиле.
Открыть сайт ↗Марк Одинцов
Креативный разработчик3D-сцены, туннель при прокрутке, шоурил и страницы кейсов.
Открыть сайт ↗ПОТОК
Арт-проектГенеративная графика в реальном времени: поле частиц перестраивается при прокрутке.
Анимация и скорость
Главный риск анимированного сайта — он тормозит на телефоне. За этим я слежу с первого дня:
- анимации двигают только то, что браузер может сдвинуть без пересчёта всей страницы, поэтому прокрутка остаётся плавной;
- тяжёлые видео и кадры переходов грузятся по мере прокрутки, а не все при открытии;
- на телефоны уходят облегчённые версии роликов;
- если в настройках телефона включено «уменьшить движение», сайт это учитывает: эффекты выключаются, содержание остаётся.
Перед сдачей гоняю сайт в режиме слабого телефона и медленной сети, а не только на своём компьютере.
Во что обойдётся
Анимации появления и отклика входят в базовую цену: визитка — 30 000 ₽, лендинг на основе примера — 80 000 ₽. Переходы «сквозь кадр» между блоками — плюс 15 000 ₽, 3D-сцена или WebGL-эффект — плюс 30 000 ₽.
Точную сумму под ваш набор посчитает калькулятор на главной.
Вопросы
Не будет ли анимация раздражать?
Будет, если её слишком много и она мешает читать. Поэтому сначала человек читает, что ему предлагают, а движение только помогает это заметить.
Как такой сайт работает на старых телефонах?
Проверяю в режиме слабого телефона и медленной сети. Тяжёлое грузится по мере прокрутки, а если в телефоне включено «уменьшить движение», эффекты отключаются.
Анимация мешает SEO?
Нет, если текст на странице остаётся обычным текстом, а не картинкой. У меня так на всех сайтах: поисковик видит заголовки и абзацы, даже если на экране они проявляются постепенно.
Можно добавить анимацию на мой нынешний сайт?
Зависит от того, на чём он сделан. На Tilda и конструкторах — ограниченно. Обычно быстрее и дешевле собрать новый лендинг на готовой основе: первый прототип будет через сутки.
Хотите такой же эффект?
Пришлите ссылку на сайт, который понравился, свой или чужой. Скажу, что из этого можно сделать и сколько это будет стоить.