Скидка 30% до 17 марта

Профессиональный онлайн-курс

Мастер анимаций:
SVG-анимации

Вы научитесь анимировать векторные изображения с помощью CSS, SMIL и JavaScript. Также освоите популярные библиотеки для создания анимаций: KUTE.js, Anime.js, Snap.svg и GSAP.

Необходимые знания: основы HTML, CSS и JavaScript

Гибкие сроки: начинайте прямо сейчас и учитесь в комфортном режиме.

Скидка 20% до 4 мая

Купить за 31 400 ₽Попробовать бесплатно

Чему вы научитесь

Вы научитесь решать задачи, которые встречаются в настоящих проектах: готовить SVG к вставке на страницу, анимировать изображение и оптимизировать анимацию.

Вас ждут 50 примеров анимации. Каждый разбирается в пошаговой демонстрации, чтобы вы смогли его повторить.

Кастомный курсор

Анимация с SVG-масками

Анимация текста и бургер-меню

Индикаторы загрузки

Морфинг форм и иконок

Анимация графиков и диаграмм

Какие анимации вы создадите

Вот часть эффектов, которые вы научитесь делать на курсе.

Анимация по таймлайну
Морфинг
Анимация главного экрана
Эффект закрашивания
Анимация диаграмм
Анимация иконок

Программа курса

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

Курс состоит из статей, пошаговых демонстраций, заданий и тестов. Для каждого задания авторы подготовили пример решения.

Раздел 1

Введение

Получить доступ

Раздел 2

Анимирование SVG с помощью CSS

Раздел 3

Анимирование SVG с помощью SMIL

Раздел 4

Анимирование SVG с помощью JS

Раздел 5

Подготовка SVG к анимированию. Производительность анимации

Раздел 6

Дополнительные возможности SVG

Раздел 7

Заключение

Курс входит в пакет «Мастер анимаций»

Вы можете приобрести набор курсов по выгодной цене.
Навыки на курсах, входящих в пакет, объединены общей тематикой.

Из чего состоит курс

Теория

Полезные статьи о создании SVG-анимаций, работе с CSS-свойствами или использовании JavaScript для создания эффектов.

Демонстрации

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

Практические задания

Задания по анимации элементов вёрстки — учат решать задачи, похожие на те, что встречаются в реальной работе.

Эталонные решения

Готовые решения заданий — подскажут, как решить задачу, если у вас что-то не получится.

Тестирование

Вопросы по статьям раздела — помогают проверить, всё ли вы запомнили. Если что-то не получилось, можно посмотреть ответы и пройти тест заново.

Сертификат

В конце курса вы получите сертификат о том, что прошли обучение в HTML Academy.

Тренажёры

Интерактивные тренажёры с теорией, заданиями и испытаниями — учат работать с SVG-элементами и рисовать простые векторные изображения.

Курс «Дизайн для фронтендеров» входит в пакет навыков

Вы можете приобрести набор курсов по выгодной цене.
Навыки на курсах, входящих в пакет, объединены общей тематикой.

Разработчикам от разработчиков

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

Методика

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

Программа

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

Контент

Актуальные статьи и демонстрации. Никакой «воды» — вы получите только необходимые для работы знания.

Комьюнити

Чат в Discord. Вы в любой момент можете написать авторам курса или посовещаться с другими студентами.

Комьюнити каждого курса — это авторы, опытные разработчики и студенты, прошедшие или проходящие этот курс.
Комьюнити не только помогает в освоении материала, но и постоянно делает курс лучше.

SVG-анимации на карте компетенций

Мы провели исследование вакансий и проверили, каких навыков ждут работодатели от фронтендеров с разным опытом работы. Результаты перенесли на карту компетенций.

Как видно по карте, навык создания SVG-анимаций пригодится мидлам и сеньорам.

Вам это подходит, если

Вы хотите больше зарабатывать или сменить работу, но не знаете, в каком направлении развиваться:

Хотите освоить конкретный навык, но не знаете как

Не хотите тратить время на поиск актуальной информации по теме

Вам нужна методика обучения и только необходимая информация

Хотите убедиться, что полученные знания усвоились на практике

На нашей стороне опыт, исследования и методика

Опыт

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

Исследования

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

Методика

Общаемся с сообществом веб-разработчиков и поэтому понимаем, как нужно учить. Максимально сокращаем время от изучения теории до решения типовых задач.

Авторы курса

Михаил Данюшин

— Фронтенд-разработчик в Crocus Group.
— Имеет опыт работы в веб-студиях.
— Переводил зарубежные статьи по фронтенду для Веб-Стандартов.
— Топ-наставник 2020-2023 годов в HTML Academy.

Татьяна Симоненко

— Фрилансер-разработчик с 2015 года.
— Работает над проектами испанских, эстонских и российских компаний: i-Free, Timeweb, Radario, Trifit.
— Последние 3 года работает удалённо из Азии — Бали, Таиланд, Шри-Ланка.
— Организовывала коливинг для удалёнщиков в Красной Поляне.
— Топ-наставник 2020-2023 годов в HTML Academy.

Что говорят разработчики

Записаться на курс «Алгоритмы и структуры данных»

Начать курс «Мастер анимаций:
SVG-анимации»

Мы постоянно разрабатываем новые курсы по навыкам, необходимым для роста до мидла