Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов.
Запись закрытой презентации
Полная программа обучения
4 блока, 23 урока, программа рассчитана на 2 месяца обучения, на выходе 2 кейса в портфолио, плюс можно заверстать еще, потому что выдадут все макеты версусов, есть проверка домашек от преподов
Самостоятельный
Стоимость
30 000 ₽
Ваша стоимость
(скидка 50%)
(скидка 50%)
15 000 ₽
Стандартный
Стоимость
50 000 ₽
Ваша стоимость
(скидка 51%)
(скидка 51%)
24 500 ₽
Максимальный
Стоимость
60 000 ₽
Ваша стоимость
(скидка 51%)
(скидка 51%)
29 400 ₽
Скидка действует еще
00
дней
00
часов
00
минут
00
секунд
1. Введение в курс
Вступительный блок и регламент прохождения курса
2. Флюидная верстка
Механика флюидной верстки
3. Введение в анимации
Зачем интерфейсам анимация?
Какие свойства можно анимировать?
Тайминг — душа анимации
Хореография анимаций
Какие свойства можно анимировать?
Тайминг — душа анимации
Хореография анимаций
4. Разбираем анимации в Taptop + механики сложных анимаций
Анимация появление на экране
Анимации по клику и ховеру
Анимации по скроллу
Анимация по скроллу со стики
Как сделать горизонтальный скролл
Лотти анимации
Анимации по клику и ховеру
Анимации по скроллу
Анимация по скроллу со стики
Как сделать горизонтальный скролл
Лотти анимации
5. Верстаем сайт с наушниками
Знакомство с макетом, верстка ui kit
Декомпозиция
Верстаем 1 сцену
Верстаем 2 сцену (допом разбираем сложные анимации появления)
Верстаем 3 сцену
Верстаем 4 сцену
Верстаем 5 сцену
Верстаем 6 сцену
Верстаем 7 сцену
Разбор 8 сцены (верстают самостоятельно)
Декомпозиция
Верстаем 1 сцену
Верстаем 2 сцену (допом разбираем сложные анимации появления)
Верстаем 3 сцену
Верстаем 4 сцену
Верстаем 5 сцену
Верстаем 6 сцену
Верстаем 7 сцену
Разбор 8 сцены (верстают самостоятельно)
6. Как придумывать анимации
Вы получите:
- Простую систему: как придумать анимацию ещё на этапе структуры страницы, а не после дизайна.
- Правило выбора: как понять, какой блок требует вау-эффекта, а какой — только лёгкой поддержки.
- Принцип работы с референсами: что смотреть, как анализировать и какие идеи забирать
- Разбор моего проекта: подробно расскажу, как я с нуля создавал сложный анимационный сайт.
Результат:
- Вы поймёте весь процесс придумывания анимаций и почувствуете, что это вам по силам.
- После урока у вас будет ясная схема действий, по которой вы сможете пойти и придумать анимацию любой сложности.
- Простую систему: как придумать анимацию ещё на этапе структуры страницы, а не после дизайна.
- Правило выбора: как понять, какой блок требует вау-эффекта, а какой — только лёгкой поддержки.
- Принцип работы с референсами: что смотреть, как анализировать и какие идеи забирать
- Разбор моего проекта: подробно расскажу, как я с нуля создавал сложный анимационный сайт.
Результат:
- Вы поймёте весь процесс придумывания анимаций и почувствуете, что это вам по силам.
- После урока у вас будет ясная схема действий, по которой вы сможете пойти и придумать анимацию любой сложности.
Вы получите:
- Простую систему: как придумать анимацию ещё на этапе структуры страницы, а не после дизайна.
- Правило выбора: как понять, какой блок требует вау-эффекта, а какой — только лёгкой поддержки.
- Принцип работы с референсами: что смотреть, как анализировать и какие идеи забирать
- Разбор моего проекта: подробно расскажу, как я с нуля создавал сложный анимационный сайт.
Результат:
- Вы поймёте весь процесс придумывания анимаций и почувствуете, что это вам по силам.
- После урока у вас будет ясная схема действий, по которой вы сможете пойти и придумать анимацию любой сложности.
- Простую систему: как придумать анимацию ещё на этапе структуры страницы, а не после дизайна.
- Правило выбора: как понять, какой блок требует вау-эффекта, а какой — только лёгкой поддержки.
- Принцип работы с референсами: что смотреть, как анализировать и какие идеи забирать
- Разбор моего проекта: подробно расскажу, как я с нуля создавал сложный анимационный сайт.
Результат:
- Вы поймёте весь процесс придумывания анимаций и почувствуете, что это вам по силам.
- После урока у вас будет ясная схема действий, по которой вы сможете пойти и придумать анимацию любой сложности.
7. Анимации на готовом дизайне
(как улучшить то, что уже есть)
(как улучшить то, что уже есть)
Вы получите:
- Понятный алгоритм: как оживлять дизайн, который вы не создавали сами
- Понимание, какие типы эффектов вообще применимы в таких условиях: появления, микроанимации, простые скролл-движения, параллакс
- Принцип «точечных улучшений»: как найти места, где анимации реально усиливают сайт
- Пример на реальном шаблоне: покажу, как я превращал статичный сайт в живой и аккуратный.
Результат:
- Вы научитесь улучшать любой готовый дизайн — клиентский макет или шаблон — и делать его живым
- Понятный алгоритм: как оживлять дизайн, который вы не создавали сами
- Понимание, какие типы эффектов вообще применимы в таких условиях: появления, микроанимации, простые скролл-движения, параллакс
- Принцип «точечных улучшений»: как найти места, где анимации реально усиливают сайт
- Пример на реальном шаблоне: покажу, как я превращал статичный сайт в живой и аккуратный.
Результат:
- Вы научитесь улучшать любой готовый дизайн — клиентский макет или шаблон — и делать его живым
Вы получите:
- Понятный алгоритм: как оживлять дизайн, который вы не создавали сами
- Понимание, какие типы эффектов вообще применимы в таких условиях: появления, микроанимации, простые скролл-движения, параллакс
- Принцип «точечных улучшений»: как найти места, где анимации реально усиливают сайт
- Пример на реальном шаблоне: покажу, как я превращал статичный сайт в живой и аккуратный.
Результат:
- Вы научитесь улучшать любой готовый дизайн — клиентский макет или шаблон — и делать его живым
- Понятный алгоритм: как оживлять дизайн, который вы не создавали сами
- Понимание, какие типы эффектов вообще применимы в таких условиях: появления, микроанимации, простые скролл-движения, параллакс
- Принцип «точечных улучшений»: как найти места, где анимации реально усиливают сайт
- Пример на реальном шаблоне: покажу, как я превращал статичный сайт в живой и аккуратный.
Результат:
- Вы научитесь улучшать любой готовый дизайн — клиентский макет или шаблон — и делать его живым
Дополнительные бонусы
Обратная связь
Обратная связь, видео-разбор и поддержка практикующих преподавателей, проверка каждого домашнего задания.
Самостоятельное изучение
Дополнительные бонусные уроки
7 шт дополнительных бонусных уроков:
- CSS-анимации (Keyframes)
- Анимации SVG элементов
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
Доступ к интенсивам по анимациям
(будут доступны все записи в будущем)
- CSS-анимации (Keyframes)
- Анимации SVG элементов
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
Доступ к интенсивам по анимациям
(будут доступны все записи в будущем)
7 шт дополнительных бонусных уроков:
- CSS-анимации (Keyframes)
- Анимации SVG элементов
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
- CSS-анимации (Keyframes)
- Анимации SVG элементов
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
7 шт дополнительных бонусных уроков:
- CSS-анимации (Keyframes)
- Анимации SVG элементов
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
- CSS-анимации (Keyframes)
- Анимации SVG элементов
- Path-анимации (Движение по пути)
- Морфинг-анимации (Morphing)
- Прелоудер
- Галлерея
- Перетаскивание элементов (drag & drop)
- Сложный кастомный курсор, который меняет поведение
- Как сделать кастомное многоуровневое меню
Все бонусные уроки, которые мы будем выпускать будут доступны
Версус
Введение в версус, прохождение соревнования, отправка сайтов на конкурс
Сообщество
Доступ к Телеграм-сообществу, где можно задавать вопросы по материалу и общатся и вдохновляться
Гарантированно попадаешь в эксперты Taptop (бейдж для каждого кандидата)
Гарантированно попадаешь в эксперты Taptop (бейдж для каждого кандидата)
Стажировка
Возможность получить коммерческий проект или работу
Возможность получить коммерческий проект или работу
Сопровождение коммерческих проектов
Коммерческое сопровождение.
5 консультаций по своему коммерческому проекту
5 консультаций по своему коммерческому проекту
Реквизиты школы
Сокращённое наименование:
ООО «Школа Таптоп»
Полное наименование:
Общество с ограниченной ответственностью «Школа Таптоп»
Адрес:
196247, г. Санкт-Петербург, вн. тер. г. Муниципальный округ Новоизмайловское, пр-кт Ленинский, д. 151, лит. А, помещ. 30-Н, офис 712Б
ИНН:
9810002411
КПП:
781001001
ОГРН:
1257800074828
Номер счёта:
40702810732440004296
Валюта:
RUB
Банк:
Филиал «Санкт-Петербургский» АО «Альфа-Банк»
ИНН банка:
7728168971
БИК:
044030786
Корреспондентский счёт:
30101810600000000786
Адрес банка:
195256, г. Санкт-Петербург, пр-т Науки, Д. 14, К. 1
Остались вопросы?
поможем разобраться!
Заполни форму для обратной связи
Спасибо ! Мы скоро свяжемся с вами
Что-то пошло не так! Попробуй еще
Поддержка
Сравнение
Сотрудничество