Профессиональный онлайн‑курс
Анимация для фронтендеров

Уровень курса: синьоры для мидлов

Формат курса: асинхронный

Начните обучение, когда удобно вам

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

Запишитесь на консультацию

Оставьте свои контакты, мы свяжемся с вами и ответим на все вопросы.

*Обязательное поле
Записаться на консультацию

Запишитесь на консультацию

Мы поможем выбрать курс, ответим на все вопросы и расскажем о действующих скидках.


*Обязательное поле

Мудрец

Если не хотите ждать звонка — напишите нам в Telegram или WhatsApp

Telegram WhatsApp

Как проходит
обучение на курсе

Что вас ждёт на обучении

Подходит ли вам этот курс

Преимущества курса

Появились вопросы?

Учебный проект

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

Промо сайт для Фестиваля «Иллюзион»

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

Личный проект

В каждом разделе вы будете выполнять задания по личному проекту. Над ним вы будете работать самостоятельно.

Проект уже свёрстан. В течение курса вы сфокусируетесь на главном: супер анимациях.

Сайт конкурса-игры «Таинственный отпуск»

Вам предстоит сделать анимации для сайта конкурса игры, где игрокам предстоит угадать пункт назначения путешествия. Чтобы попробовать свои силы, им нужно будет сыграть в чате с ботом ИИ «Соня». А вам — с помощью анимаций создать весёлую атмосферу развлечения.

Отзывы компаний

Мы давно зарекомендовали себя в профессиональном сообществе. Нас и наших выпускников знают не только разработчики, но и крупные компании. Вот несколько отзывов от компаний о наших курсах и выпускниках.

В Авито нет верстальщиков, только фронтенд-разработчики разных уровней. Чтобы попасть к нам на работу младшим разработчиком, человек должен обладать определёнными навыками. Это уверенное владение базовыми технологиями: HTML, CSS и JavaScript, понимание того, как работает браузер, знание, как делать проекты кроссбраузерными, как работает API, DOM и другие важные основы. Кроме этого мы ценим ответственность, умение играть в команде, желание развиваться и инициативность.

Мне, как наставнику на курсах и бывшей студентке, известны стандарты качества Академии и то, как строится работа. Всё максимально приближено к реальным условиям — используется система контроля версий Git, есть разбивка проекта на этапы (своеобразные итерации), обязательное ревью кода наставниками и неумолимый дедлайн. Большое внимание уделяется доступности интерфейсов, а это полезно для всей отрасли.

В целом программа обучения в Академии построена грамотно для старта. Она помогает подготовить универсального бойца, который сможет качественно заниматься разработкой и в студии, и в крупной продуктовой компании. Если человек защитился на 100%, то это показатель, что у него всё в порядке с обучаемостью, мотивированностью и личными качествами, которые понадобятся в будущем на работе. А дальше уже всё зависит от активности и способности доказать свои умения делом.

Яна Крикливая разработчик клиентской части, Авито

Авито

Авито Интернет-сервис для размещения объявлений о товарах, услугах, вакансиях и резюме на рынке труда.

Что касается вёрстки и создания веб-страниц, мы в команде трепетно относимся к семантической разметке и её пониманию, умению писать на чистом CSS и системному мышлению у разработчика. Страницы должны быть не только красивыми для пользователя, но и быстро загружаться, быть структурированными и, конечно, удобными для работы в команде. При нашем объёме проектов уделять этому внимание очень важно.

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

В этом смысле, подход Академии к обучению кажется адекватным: кодревью от опытного разработчика хорошо подготавливает к работе. Особенно ценно, что вся работа над проектами сразу идёт через Git — у нас также вся работа в компании проходит через обязательные ревью.

Сейчас в команде работает выпускник Академии Павел и я им доволен. Необходимые базовые навыки, понимание семантики, работа с чистым CSS — всё это на хорошем уровне, а что касается JavaScript — он быстро ориентируется, если делал что-то похожее — вспоминает. Он был сразу готов взять и начать работать.

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

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

Сергей Чикирев Wrike Website Team Lead

Wrike

Wrike Популярный сервис для управления проектами и совместной работы.

Мы в Ostrovok.ru постоянно ищем талантливых ребят: наш продукт быстро развивается и лишние фронтендерские руки (желательно «золотые») нужны всегда. Хорошего специалиста найти не так просто, поэтому мы уже несколько раз обращались к Академии, когда подбирали джуниоров.

Ребята приходили с хорошей базой и горящими глазами, быстро вливались в процессы и команду. Сейчас в Ostrovok.ru работают три выпускника Академии — все на позиции джунов и отлично справляются.

Спасибо Академии за хорошо подготовленных специалистов.

Ostrovok.ru

Ostrovok.ru Интернет-сервис по бронированию более 900 000 отелей.

Мы регулярно отправляем своих сотрудников на тренинги, семинары, интенсивы и всячески открыты к образовательным программам, так мы и познакомились с HTML Academy.

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

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

Валерия Шемякина Менеджер по обучению Ozon.

Ozon

Ozon Крупнейший российский интернет-магазин.

HTML Академия — лучшее, что происходило с ИТ-образованием в России.

Если вы боитесь, что не разберётесь или «программирование — это не для вас», то HTML Академия подойдёт вам идеально. Всегда будет у кого спросить и кто вас поддержит.

Они много работали с сообществом, чтобы понять какие именно знания нужны на работе. Круто насколько всё приближено к реальной разработке.

Андрей Ситник

Андрей Ситник Автор множества проектов с открытым исходным кодом. Создатель PostCSS, Autoprefixer и Logux_io.

К нам на вакансию фронтенд-разработчика пришёл выпускник Академии. Знания, полученные на интенсивах по JavaScript и вёрстке помогают ему решать задачи с минимальными трудозатратами.

В целом, именно обучение на курсах Академии дало нашему сотруднику возможность развиваться как хорошему разработчику и профессионально подходить к решению проблем в работе.

ГиперМетод

ГиперМетод Ведущий разработчик решений для организации дистанционного обучения, управления знаниями и учебным процессом, развития и оценки персонала в компаниях и учебных заведениях.

Огромное спасибо HTML Academy за крутых выпускников! Три человека брали к себе на стажировку, в последующем два из них остались у нас на постоянной работе. Классные ребята с хорошим бэкграундом! Академия обучает сильных специалистов!

NORDMOUNT

NORDMOUNT Внедрение, кастомизация и интеграция Salesforce на рынках США и западной Европы.

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

После завершения курса вы сможете строить в браузере анимации любой сложности. Благодаря грамотному использованию анимаций вы сможете повысить качество UX и привлекательность сайтов, которые вы разрабатываете. На курсе предусмотрено более 40 практических заданий.

Раздел 1

Основы анимации

В первом разделе мы рассмотрим историю появления анимации. Как создать иллюзию движения, основные отличия классической и компьютерной анимации. Какие есть абстракции для построения компьютерной анимации. Чем отличается линейная анимация от покадровой. Также мы рассмотрим 12 принципов выразительной анимации. После этого мы создадим простые анимационные переходы в CSS.

  • Pipeline выполнения кода в браузере.
  • CSS transition и animation: отличия.
  • Временные функции: встроенные, cubic-bezier.
Раздел 2

Анимация в CSS

Во втором разделе продолжим знакомиться с анимацией на основе CSS.

  • Рассмотрим инструменты для отладки и улучшения производительности анимации в браузере.
  • Узнаем, как перенести часть отрисовки CSS на видеоускоритель.
  • Познакомимся с принципами Material design.
  • Изучим, что такое придание веса объектам и создание иллюзии реалистичности, а также соблюдение принципа причины и следствия.
  • Подробно рассмотрим 3 принципа выразительной анимации: расчёт времени, фазованное движение, доводка и захлёст движения.
  • Попрактикуемся в работе с таймлайном составных объектов и групп элементов и планировании анимации: рассказ истории и управление вниманием пользователя.
Раздел 3

SVG Анимация

В этой главе мы изучим спецификацию SMIL, которая описывает анимацию внутри спецификации SVG:

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

Покадровая анимация. JavaScript и Canvas

В этой главе мы перейдём к знакомству с более низкоуровневой абстракцией — покадровой анимацией. Изучим, что такое FPS и стандартные значения FPS: 24, 30, 60. Что такое плавающий FPS. Рассмотрим примеры покадровой анимации:

  • мультипликация состояния персонажей в играх — метод в веб Sprite Sheets — заготовленные анимации, 360-модель (например, автомобиля).
  • компьютерная мультипликация, моушн-дизайн — метод в веб JS Tween и JS Morph — анимация с помощью библиотек, например, CreateJS, AnimateJS, GSAP.
  • игры с отслеживанием действий игрока в реальном времени — гонки, тетрис — метод создания моделей с интерфейсом взаимодействия — в веб интерактивные элементы и игры.

А также продолжим углубленно изучать принципы выразительной анимации: сценичность, привлекательность, профессиональный рисунок — внимание разработчика к деталям, качество финальной картинки.

В практической части научимся использовать:

  • window.requestAnimationFrame.
  • Canvas и его параметры и методы.
  • Цикл отрисовки анимации простого элемента. Трансформации. Рисование картинки. Маскирование. Класс абстрактного объекта — рига. Расширение класса. Параметрическое задание траектории. Примеры: эллипс, спираль, парабола, синусоида, синусоида с затуханием и т.п.
  • Манипуляции с траекториями: сложение, умножение, параллельный перенос, смещение фазы синусоиды.
  • Методы update() и render().
Раздел 5

WebGL. Шейдеры

В этой главе мы продолжим работать с покадровой анимацией. Изучим, что такое WebGL и OpenGL. Рассмотрим отличие работы в контексте 2d и webgl. Исследуем, какие бывают растровые эффекты:

  • цветовые фильтры
  • OpenGL
  • маски — Lumination, Alpha
  • цветовые наложения — blending
  • шумы
  • смещения
  • размытия

А также изучим анимацию растровых эффектов: постоянное движение и изменение параметров.

На практике рассмотрим:

  • Что такое вершинные и фрагментные шейдеры.
  • Как использовать WebGL 3d для 2d эффектов.
  • Что такое геометрия.
  • Pipeline WebGL.
  • Взаимодействие JS и WebGL.
  • Типы данных в WebGL.
  • Написание GLSL — основы.
Раздел 6

Three.js часть 1: 3D в браузере

В этой главе мы снова поговорим о системах координат, точках и векторах. Изучим матрицы трансформаций 3D, кватернионы и углы Эйлера, перемножение матриц.

Рассмотрим 2 варианта создания моделей с интерфейсом управления пользователем:

  • Прямое задание параметров: скорости или ускорения (перемещения или вращения).
  • Задание цели — значения, к которому нужно постепенно приближаться: элемент притягивается к курсору.
  • Изучим цикл работы движка, методы invalidate(), update() и render(), особенности работы с плавающим FPS. Узнаем, как вести расчёты внутри update().

В практической части начнём работать с библиотекой Three.js. Изучим:

  • Способы описания объектов: положение, геометрия и материалы.
  • Геометрию: параметрические встроенные, произвольные загружаемые. Буфер геометрии.
  • Какие есть материалы, виды материалов, режимы отрисовки, кастомные материалы.
  • Флаги для update.
  • Цикл render.
  • Анимации положения. Метод анимации Morph.
  • Сцена + камера. Добавление объектов на сцену. Группировка.
  • Свет. Виды источников света. Материал Matcap.
Раздел 7

Three.js часть 2: Работа с камерой

В этой части мы рассмотрим, что такое камера в WebGL, и в частности в Three.JS:

  • Управление камерой.
  • Базовые движения камеры.
  • Риги камер.
  • Разные конструкции ригов для разных видов управления.

В практической части:

  • Увидим, какие бывают виды камер в Three.JS, параметры камеры, ресайз при переходе к мобильной версии.
  • Изучим подходы к анимации камеры. Разберёмся с реакцией на действия пользователя — плавное изменение ракурса. Управление с помощью рига: цикл рендера рига камеры. Создание анимации пролёта.
  • Риги камер.
  • Рассмотрим переключение между камерами — монтаж. Правила монтажа.
Раздел 8

Будущее анимации в браузере

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

  • Увидим, чем отличается Web Animation API от обычной CSS анимации и какие дополнительные возможности даёт.
  • Изучим основы Houdini API.
  • Поговорим о библиотеках, которые помогут упростить работу с анимациями, таймлайнами, SVG, canvas, WebGL.
  • Рассмотрим программы для работы с анимацией и графикой для web: Google Web Designer, Adobe Animate, Adobe After Effects, программы 3d графики: Cinema 4d, Blender.
  • Сделаем небольшой обзор подходов к созданию динамически генерируемой анимации и графики. Рассмотрим, какие инструменты можно использовать для построения кроссплатформенного ПО с 3d.
  • Поговорим о том, как можно дальше развиваться в создании анимации.

Появились вопросы?

Статистика Академии

  • 12лет на рынке обучения
  • 278онлайн-курсов проведено
  • 44 057выпускников защитили проекты

Запишитесь на консультацию

Мы поможем выбрать курс, ответим на все вопросы и расскажем о действующих скидках.


*Обязательное поле