Курс Продвинутые Анимации Бандл

Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов.

Ок

Полная программа обучения
«Продвинутые анимации»

7 блоков учебного материала, 23 урока, программа рассчитана на 2 месяца обучения с проверками от кураторов, на выходе премиальный кейс в портфолио.

Самостоятельный

Стоимость

30 000 ₽

Ваша стоимость
(скидка 25%)

22 500 ₽

Оставить заявку

В рассрочку с Яндекс Пэй

Стандартный

Стоимость

50 000 ₽

Ваша стоимость
(скидка 28%)

36 000 ₽

Оставить заявку

В рассрочку с Яндекс Пэй

Максимальный

Стоимость

60 000 ₽

Ваша стоимость
(скидка 28%)

43 200 ₽

Оставить заявку

В рассрочку с Яндекс Пэй

Скидка действует еще

дней

часов

минут

секунд

1. Введение в курс

Вступительный блок и регламент прохождения курса

2. Флюидная верстка

Механика флюидной верстки

3. Введение в анимации

Зачем интерфейсам анимация?
Какие свойства можно анимировать?
Тайминг — душа анимации
Хореография анимаций

4. Разбираем анимации в Taptop + механики сложных анимаций

Анимация появление на экране
Анимации по клику и ховеру
Анимации по скроллу
Анимация по скроллу со стики
Как сделать горизонтальный скролл
Лотти анимации

5. Верстаем сайт с наушниками

Знакомство с макетом, верстка ui kit
Декомпозиция
Верстаем 1 сцену
Верстаем 2 сцену (допом разбираем сложные анимации появления)
Верстаем 3 сцену
Верстаем 4 сцену
Верстаем 5 сцену
Верстаем 6 сцену
Верстаем 7 сцену
Разбор 8 сцены (самостоятельная работа)

6. Как придумывать анимации

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

Результат:
- Вы поймёте весь процесс придумывания анимаций и почувствуете, что это вам по силам.
- После урока у вас будет ясная схема действий, по которой вы сможете пойти и придумать анимацию любой сложности.

7. Анимации на готовом дизайне
(как улучшить то, что уже есть)

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

Результат:
- Вы научитесь улучшать любой готовый дизайн — клиентский макет или шаблон — и делать его живым

Дополнительные бонусы

Обратная связь

Обратная связь, видео-разбор и поддержка практикующих преподавателей, проверка каждого домашнего задания.

Самостоятельное изучение

Дополнительные бонусные уроки

7 шт дополнительных бонусных уроков:

- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню

Сообщество

Доступ к Телеграм-сообществу, где можно задавать вопросы по материалу и общатся и вдохновляться

Гарантированно попадаешь в эксперты Taptop (бейдж для каждого кандидата)

Стажировка

Возможность получить коммерческий проект или работу

Сопровождение коммерческих проектов

Коммерческое сопровождение.
5 консультаций по своему коммерческому проекту

Полная программа обучения «Продвинутые анимации»

– 7 блоков учебного материала, 23 урока,
– программа рассчитана на 2 месяца обучения с проверками от кураторов,
– на выходе премиальный кейс в портфолио.

Полная программа обучения
«Визуальная верстка 2.0»

– 14 блоков, 60 уроков,
– более 50 часов качественного теоретического и практического видео-контента,
– программа рассчитана на 2 месяца обучения.

Самостоятельный

Стоимость

55 000 ₽

Ваша стоимость
(скидка 36%)

35 150 ₽

Купить

В рассрочку с Яндекс Пэй

Стандартный

Стоимость

90 000 ₽

Ваша стоимость
(скидка 37%)

57 095 ₽

Купить

В рассрочку с Яндекс Пэй

Максимальный

Стоимость

110 000 ₽

Ваша стоимость
(скидка 38%)

68 590 ₽

Купить

В рассрочку с Яндекс Пэй

Скидка действует еще

дней

часов

минут

секунд

1. Вступительный блок. Регламент

Вступительный блок. План работы на курсе. Регламент прохождения курса.

2. Базовые основы верстки

Основы HTML и CSS. Иерархия элементов сайта. Родительские и дочерние элементы.
Изучение макета.
Работа с БЭМ системой. Как называть слои и классы.

3. Подготовка к разработке

Подготовка медиа-материалов.
Создание и настройки проекта.
Верстка UI-kit проекта. Часть 1-2
Верстка UI-kit проекта. Часть 3-4
Верстка UI-kit проекта. Часть 5-6
Создание структуры страницы.

4. Верстка. Разработка первых 5 блоков

Верстаем Первый блок - Хедер. Создаем из Хедер компонент. Общие принципы работы с компонентами.
Проверка по подходу Pixel Perfect.
Верстаем Второй блок - Hero Section.
Верстаем Третий блок (Tabs).
Верстаем Четвертый блок.
Верстаем Пятый блок (Swiper).

5. Верстка. Разработка следующих 5 блоков

Верстаем Шестой блок.
Верстаем Седьмой (Accordion).
Верстаем Восьмой блок (Swiper).
Девятый блок (Collection).
Футер (виджет Map). Создаем из Футер компонент.

6. Верстка. Разработка дополнительных блоков

Верстаем мобильное меню.
Создание всплывающего окна pop-up.
Настройка формы.

7. Псевдоклассы и селекторы

Дополнительный модуль - Псевдоклассы.
Дополнительный модуль - Контекстные селекторы.

8. Верстка. Разработка страницы Thank You

Создание страницы Thank You.
Настройка Виджета Form.
Дополнительный модуль - проверка Pixel Perfect.

9. Интеграции, SEO

Интеграции.
SEO, Настройка.

10. CMS-коллекции

Общие принципы. Создание и настройки коллекций.
Создание и настройка индексируемой страницы.
Создание и настройка динамической страницы.
Настройка Мультиреференс.
Условное отображение элементов.
Настройка и подключение Референс для двух коллекций.
Настройка SEO для коллекций.

11. Завершение и передача проекта

Настройка якорных ссылок в меню.
Финальная проверка, чек-лист.
Добавление Alt-текстов.
Подключение домена.
Передача проекта, клиентский режим, тарифы.

12. Продвинутый блок

Custom Attributes.
Основы CSS. Продвинутая настройка RichText.
Флюидная верстка на VW.
Верстка в REM.

13. Базовые анимации

Введение в анимации, тайминговые функции, плавность, скорость, иерархия анимаций.
Анимация появления. Основные параметры Opacity, Move.
Анимация по скроллу. Параметры Scale, Move.
Анимация при наведении. Анимация по клику. Параметры Scale, Corner radius.