Курс научит вас анимировать карточки товаров, аккордеоны, модальные окна и другие элементы сайта. И главное — делать это правильно, чтобы анимация загружалась быстро.
Что нужно знать: основы HTML, CSS, JavaScript
Гибкие сроки: начинайте сейчас и учитесь в комфортном режиме
Эффекты по скроллу
Параллакс и 3D-анимациии
Эффекты по ховеру и движению мыши
Зацикленные анимации
Глитч-эффект
Эффект Кена-Бёрнса
В каждом разделе курса — обучающие статьи, пошаговые примеры создания анимаций,
задания с разбором решения и тесты.
Обучение будет проходить по принципу «от простого к сложному».
Сначала вы изучите необходимые CSS-свойства и правила. Затем научитесь привязывать анимации
к пользовательскому взаимодействию. А в конце вы познакомитесь с инструментами для отладки и научитесь
оптимизировать анимации.
Раздел 1
Узнаете о принципах работы с анимациями, научитесь
использовать CSS-свойство transition и создадите простые анимационные
переходы в CSS.
— Способы создания анимаций
— Физиология восприятия анимации. Понятие
FPS
— CSS-свойство transition
— Примеры простых анимаций
с использованием одного элемента
— Принципы создания анимации
— Практика:
переходы при наведении на кнопки, анимация карточек товаров для интернет-магазина, переходы на кнопках
соцсетей
— 10 пошаговых демонстраций с примерами создания анимаций
—
Тест по разделу
Раздел 2
Рассмотрим
CSS-свойство transition-timing-function и узнаете
о часто встречающихся ошибках при создании анимаций. Создадите более сложные анимационные переходы
и сценарии анимаций.
— Свойство transition-timing-function
— Частые ошибки при создании простых
анимаций
— Примеры анимаций с использованием дочерних элементов и псевдоэлементов
—
Практика: усложнённая анимация карточек товара, анимации ссылок и кнопок
—
14 пошаговых демонстраций с примерами создания анимаций
— Тест
по разделу
Раздел 3
Разберёте анимации, созданные с помощью @keyframes,
и группу свойств animation.
— Правило @keyframes и его
применение
— CSS-свойства аnimation и transition. Использование аnimation на
практике
— Смягчение начала и конца движения
— Подготовка (упреждение)
—
Практика: анимирование элементов сайта премиальных беговых кед
— 8
пошаговых демонстраций с примерами создания анимаций
— 2 тренажёра
по CSS-анимациям
— Тест по разделу
Раздел 4
Научитесь добавлять анимации при клике, движении мыши
и прокрутке страницы.
— Использование CSS-анимаций по клику
— Событие анимации
—
Анимация открытия и закрытия меню
— Бесконечный слайдер изображений
— Анимация изображений и
подписи слайдера
— Аккордеон с поочерёдным переключением вкладок
— Табы с анимацией
переключения
— Анимации по скроллу
— Практика: создание анимаций по клику
и скроллу
— 17 пошаговых демонстраций с примерами создания анимаций
—
Тест по разделу
Раздел 5
Узнаете, как создавать эффект параллакса и эффектные
3D-анимации.
— Параллакс-эффект и 3D-трансформации в CSS
— 3D-трансформации
c JavaScript
— Практика: создание 3D-эффектов для карточек товаров, шапки страницы
и анимации первого экрана сайта
— 12 пошаговых демонстраций с примерами создания
анимаций
— Тест по разделу
Раздел 6
Познакомитесь с инструментами для отладки и научитесь
оптимизировать анимации.
— Линейные и покадровые анимации
— Инструменты для отладки
анимации и производительности анимации
— Оптимизация производительности CSS-анимации
—
Медиазапросы prefers-reduced-motion и update
— Тест по разделу
Раздел 7
— Подводим итоги курса
— Библиотеки
CSS-анимаций
— Финальный тест
Полезные статьи о создании анимаций, работе с CSS-свойствами или использовании JavaScript для создания эффектов.
Пошаговые примеры создания анимации — показывают, как правильно писать код, и учат применять теорию на практике.
Задания по анимации элементов вёрстки — учат решать задачи, похожие на те, что встречаются в реальной работе.
Готовые решения заданий — подскажут, как решить задачу, если у вас что-то не получится.
Вопросы по статьям раздела — помогают проверить, всё ли вы запомнили. Если что-то не получилось, можно посмотреть ответы и пройти тест заново.
В конце курса вы получите сертификат о том, что прошли обучение в HTML Academy.
Интерактивные тренажёры с теорией и заданиями — знакомят с основными CSS-свойствами для создания анимации.
Сделано для разработчиков, у которых мало времени на обучение. Вы сможете совмещать работу с учёбой.
Курс составлен по специальной методике. Вы изучаете теорию, смотрите, как применить её на реальных задачах, и выполняете похожее задание, чтобы закрепить навык.
Комьюнити каждого курса — это авторы, опытные разработчики
и студенты, прошедшие или проходящие этот курс.
Оно не только помогает в освоении материала,
но и постоянно делает курс лучше.
Вы можете приобрести набор курсов по выгодной цене.
Навыки
на курсах, входящих в пакет, объединены общей тематикой.
Изучите универсальные навыки для роста
Подробнее
Улучшайте UI и UX любых интерфейсов
Подробнее
Развивайте скиллы, связанные с дизайном
Подробнее
Качайте навыки разработки интерфейсов
Подробнее
Сделано для разработчиков, у которых мало времени на обучение. Вы сможете совмещать работу с учёбой.
Курс составлен по специальной методике. Вы изучаете теорию, смотрите, как применить её на реальных задачах, и выполняете похожее задание, чтобы закрепить навык.
Комьюнити каждого курса — это авторы, опытные разработчики
и студенты, прошедшие или проходящие этот курс.
Оно не только помогает в освоении материала,
но и постоянно делает курс лучше.
Мы провели исследование вакансий и проверили, каких навыков ждут работодатели
от фронтендеров с разным опытом работы. Результаты перенесли на карту компетенций.
Как видно
по карте, джуны должны знать простые анимации, группу CSS-свойств transition. От мидлов и сеньоров работодатели ждут более глубоких знаний: нужно
создавать сложные анимации на CSS и JS.
Карта компетенций показывает, какими навыками должен обладать фронтенд-разработчик на каждом этапе развития и чему необходимо учиться для карьерного роста.
Как мы собирали карту компетенций?
Исследовали рынок вакансий
Опросили тимлидов крупных продуктовых компаний
Собрали обратную связь от опытных разработчиков из числа наставников
Опросили работодателей из Центра Карьеры, которые сотрудничают с выпускниками профессий
Посмотреть карту компетенций целиком можно тут
А прочитать про то, как мы её собрали --- вот тут
Хотите освоить конкретный навык, но не знаете как
Не хотите тратить время на поиск актуальной информации
Вам нужна методика обучения и только необходимая информация
Хотите убедиться, что полученные знания усвоились на практике
11 лет выстраиваем связь с рынком коммерческой разработки. Обучаем
начинающих разработчиков и видим, как они становятся опытными специалистами.
Перед запуском курса убеждаемся, что он даёт востребованный
профессиональный навык.
Общаемся с сообществом веб-разработчиков и поэтому понимаем, как нужно
учить. Максимально сокращаем время от изучения теории до решения типовых задач.
«Если коротко — курс мои надежды оправдал. Пожалуй, перечислю
основные достоинства:
— Нет пространной теории, только необходимый минимум;
— Множество
примеров решения реальных практических задач;
— Практические задания с эталонными решениями
для самоконтроля».
«Отличный курс по анимации! Последовательно и доступно объясняются готовые примеры от простого к сложному. Обучающие задачи уже встретились у меня на практике. Спасибо авторам курса! По параллакс-эффекту особенно было интересно».
«В целом, большую часть знал до этого, но местами подчерпнул очень важные вещи. Базовые знания по анимации тут имеются и их вполне хватит для оживления страницы».
«Курс оказался очень полезным. В самом начале показалось, что практики будет недостаточно, но последующие разделы развеяли это заблуждение. Отдельное спасибо за большое количество демонстраций, которые позволяют детально посмотреть код».
«Было ожидание, что будет больше разговорных видео, слушать преподавателя. По многим курсам есть такое в видео-формате. А пришлось читать учебник. Я бы не сказал, что это что-то испортило. Оказалось, что с учебником приятно работать. Думал, что будет сложнее. Оказалось --- нет, всё прекрасно».
«Когда находишь правильное решение, и оно работает, ошибок не выдаёт, ты все равно сомневаешься, а правильно ли ты сделал. [На курсе] коллективная работа, авторитетное мнение. Это как компас, ориентир».
«У меня есть мнение, что HTML Academy делает курсы прикладные для специалистов. Что студент выйдет сразу с общим представлением о вопросе, уже имея набор практических решений».
По всем вопросам пишите нам в WhatsApp или Telegram, мы ответим в течение 24 часов.
