К содержанию
Юрий ТелицинIn English

Все работыКонцепт

Kadr

Школа моушн-дизайна на монтажном таймлайне

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

Next.js · React · TypeScript

Kadr: первый экран на компьютере
Kadr: первый экран на телефоне

Задача

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

Дальше по странице

Kadr на компьютере, дальше по странице, кадр 1Kadr на компьютере, дальше по странице, кадр 2Kadr на компьютере, дальше по странице, кадр 3Kadr на компьютере, дальше по странице, кадр 4
Kadr на телефоне, дальше по странице, кадр 1Kadr на телефоне, дальше по странице, кадр 2Kadr на телефоне, дальше по странице, кадр 3

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

  1. Перемотать титр

    Тяните плейхед: вступительный титр прокручивается назад или вперёд, а буквы меняют ширину и насыщенность на каждом ключевом кадре.

  2. Сравнить курсы

    Три дорожки показывают длину курсов в неделях, а программа — что изучают и что сдают каждую неделю.

  3. Настроить кривую и оставить заявку

    Настройте кривую анимации, соберите с ней свой титр, рассчитайте ежемесячный платёж и заполните заявку с уже выбранным курсом.

Следующая работаVattУчёт и снижение энергопотребления офисных зданий