Курсы
События
Преподавателям
Компаниям
О нас
+7 499 938-92-02

Web-анимация

Научись создавать современные интерфейсы. Освой популярные приемы web-анимации.

Для кого этот курс

  • Для Fullstack-разработчиков. Научитесь создавать качественные web-анимации, детальнее погрузитесь в особенности работы анимации на страницах сайтов
  • Для HTML-верстальщиков. Программа позволит улучшить качество знаний уже опытным верстальщикам, которые хотят расширить свое портфолио за счет CSS и JS анимаций, работы с 3D
  • Для Арт-директоров. Углубите свои знания html, css, js, разберитесь в работе типичных элементов сайта: слайдеры, модальные окна, аккордеоны и т.д. и добавьте к ним анимации

Необходимые знания

  • Базовое понимание HTML, CSS
  • Базовое понимание основ программирования

Что даст вам этот курс

  • расширит понимание возможностей css-анимации
  • более эффектное портфолио с кейсами создания различных анимаций
  • углубит знания по javascript, особенно по работе с WebGL, что будет явным конкурентным преимуществом при поиске работы

В курсе будут рассмотрены все новейшие технологии, которые используются при создании  Web-анимации. Вы подробно изучите библиотеки Three.js и WebGL, рассмотрите анимации с помощью последней версии CSS,научитесь создавать 3D-модели.

Какие навыки получат студенты на курсе?

  1. Создавать простые и сложные, анимации для элементов сайта, в зависимости от задачи
  2. Комбинировать несколько анимаций в одну общую историю по таймлайну
  3. Навык работы с стандартными компонентами: слайдер, аккордеон и т. д. навык создания svg анимаций
  4. Работать с различными событиями в JS
  5. Навык работы с css/js библиотеками
  6. Навык работы с документацией

 

Почему стоит освоить?

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

Процесс обучения

Занятия проходят 2 раза в неделю в формате интерактивных вебинаров + 1 домашнее задание раз в неделю. Принимайте активное участие в вебинарах. Так вам будет легче усвоить материал и сохранить энтузиазм в течение всего курса. Наши методисты помогают экспертам стать хорошими преподавателями, которые умеют превращать сложное в понятное и увлекательное.

Актуальные инструменты

Подробно изучите библиотеки Three.js и WebGL, а также научитесь создавать 3D-модели

Практика

Домашние задания + проектная работа, которая усилит ваше портфолио

Портфолио

Соберете эффектное портфолио с кейсами создания различных анимаций

Трудоустройство

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

  • Получите помощь с оформлением резюме, портфолио и сопроводительного письма
  • Разместите свое резюме в базе OTUS и сможете получать приглашения на собеседования от партнеров
  • Пройдете карьерную консультацию с нашим HR-специалистом
  • Получите рекомендации, как искать работу, и советы по прохождению собеседования
Формат обучения

Интерактивные вебинары

2 занятия по 2 ак.часа в неделю
Доступ к записям и материалам остается навсегда

Макеты для ДЗ

В вашем распоряжении будут HTML-макеты для выполнения заданий, специально подготовленные преподавателями курса

Активное комьюнити

Общайтесь с преподавателями голосом на вебинарах и в Slack группы

Программа

Анимации с помощью CSS

В этом модуле мы начнем знакомство с анимациями, разберемся с тем, как работают transition, animation и @keyframes. В чем их отличия, что и когда лучше применять. Разберемся с наиболее частыми ошибками и научимся их исправлять. Поговорим про качество анимаций и как над ним работать.

Тема 1: Вводное занятие: знакомство с курсом, обзор анимации/знакомство с анимацией

Тема 2: Трансформации и переходы в css

Тема 3: Практическое применение css переходов transition

Тема 4: CSS Анимация animation и @keyframes

Тема 5: Анимационные истории

Анимации по событию

Во втором модуле мы научимся запускать анимации по клику и скроллу. Разберем типичные ситуации и компоненты, как нарпимер, открытие меню, переклюение слайдеров, вкладок и аккордеонов. Научимся более интересно работать с css-анимациями за счет событий в JavaScript.

Тема 1: Анимации по клику

Тема 2: Анимация элементов форм

Тема 3: Слайдер

Тема 4: Аккордеон и табы

Тема 5: Анимации по скроллу

3D трансформации и параллакс

Третий модуль посвящен знакомству с 3D, здесь мы разберемся с тем, что такое трехмерные трансформации в css, что такое параллакс и как его можно имитировать с помощью JS.

Тема 1: Классический JS параллакс

Тема 2: Свойства 3D трансформации

SVG анимации

В четвертом модуле познакомимся со спецификацией SVG и научимся применять css и smil анимации для таких элементов.

Тема 1: Введение в SVG

Тема 2: SMIL анимации

Тема 3: Анимация групп элементов

Тема 4: Интерактивные анимации

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

В пятом модуле узнаем о том, как можно создавать анимации с помощью JavaScript, поговорим про прозводительность анимаций и как делать то, что не может css. Познакомимся с еще одной технологией - Canvas, и создадим с ее помощью еще несколько анимаций.

Тема 1: JS анимации

Тема 2: Animation()

Тема 3: Введение в Canvas

Тема 4: Анимация простых элементов & best-pracices

Тема 5: Работа с изображениями и текстом

Тема 6: Анимация изображений & best-pracices

Тема 7: Анализ производительности JS анимаций

Тема 8: GSAP

WebGL и Three.js

Шестой модуль будет посвящен тремерной графике и WebGL, который будем рассматривать на примере библиотеки Three.js. Создадим несколько больших и интересных анимаций экранов сайта.

Тема 1: Введение в WebGL

Тема 2: Библиотека Three.js

Тема 3: Работа с готовыми моделями

Тема 4: Работа с материалами

Тема 5: Анимация объектов в three.js

Тема 6: Типы камер и их настройка

UX&UI и ПО

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

Тема 1: UX&UI

Тема 2: ПО для работы с анимацией

Проектная работа

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

Тема 1: Выбор темы и организация проектной работы

Тема 2: Консультация по проектам и домашним заданиям

Тема 3: Защита проектных работ

Тема 4: Подведение итогов и карьерное консультирование

Выпускной проект


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

Преподаватели

Мария Коршунова

468 занятий
66 студентов

Преподаватель физики и информатики по образованию. Работает в сфере веб-разработки с 2011 года. Работала над сайтами как крупных холдингов (Redmond, BMV, Сибирская корона, ВО Рестэк и другие), так и небольших стартапов. За это время поработала с более чем сотней различных проектов. С 2016 года преподаёт HTML, CSS и основы JavaScript начинающим и продолжающим верстальщикам. Автор и методист курсов: "Создание и продвижение сайтов", "Веб-разработчик с нуля", "Основы программирования на JavaScript", "JS для детей", "CSS-анимации для frontend-разработчика". Стремится сама развиваться в индустрии, а также доступно объяснять даже самые сложные аспекты профессии тем, кто хочет к ней присоединиться.

Преподает на курсах

  • Специализация Fullstack developer
  • Web-анимация
  • JavaScript Developer. Basic
  • HTML/CSS
  • Выбор профессии в IT

Антон Бобров

3 занятия

Front-end Developer, сооснователь веб-студии AdvancedTeam, член жюри на платформе Awwwards. Имею педагогическое образование, программированием занимаюсь с 2013 года. Начинал со стандартного набора: HTML, CSS, JS, PHP. На текущий момент стек технологий разнообразный, основной фреймворк - React. Последние несколько лет развиваюсь в сфере анимаций, испытываю новые подходы и технологии. За годы работы в AdvancedTeam создавал проекты, бравшие награды на платформах Awwwards, CSSDA & theFWA, смысл которых - показать силу интерактивного веба.

Преподает на курсах

  • Web-анимация

Эксперты-практики делятся опытом, разбирают кейсы студентов и дают развернутый фидбэк на домашние задания

Прошедшие
мероприятия

Мария Коршунова
Открытый вебинар
Использование псевдоэлементов для создания интересных анимаций кнопок
Антон Бобров
Открытый вебинар
Three.js - работа с 3d моделью
Оставьте заявку, чтобы получить доступ к записям прошедших мероприятий. Записи всех мероприятий появятся в этом блоке

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

Отус помогает развивать высокотехнологичные Команды. Почему нам удаётся это делать успешно:
  • Курсы OTUS верифицированы крупными игроками ИТ-рынка и предлагают инструменты и практики, актуальные на данный момент
  • Студенты работают в группах, могут получить консультации не только преподавателей, но и профессионального сообщества
  • OTUS проверяет знания студентов перед стартом обучения и после его завершения
  • Простой и удобный личный кабинет компании, в котором можно видеть статистику по обучению сотрудников
  • Сертификат нашего выпускника за 5 лет стал гарантом качества знаний в обществе
  • OTUS создал в IT более 120 курсов по 7 направлениям, линейка которых расширяется по 40-50 курсов в год

Сертификат о прохождении курса

OTUS осуществляет лицензированную образовательную деятельность.
В конце обучения вы получите сертификат OTUS о прохождении курса

После обучения:

  • получите материалы по всем пройденным занятиям (презентации, видеозаписи вебинаров)
  • получите сертификат об окончании курса
  • будете иметь возможность попасть на собеседования в компании-партнеры курса

Частые вопросы

Что, если в середине курса я не смогу продолжать обучение?
У вас есть право одного бесплатного трансфера в другую группу
Обязательно ли защищать выпускной проект?
Для получения сертификата OTUS необходимо сдать проект. Кроме того, проект необязательно защищать перед аудиторией, а можно сдать в чате с преподавателем.
С какого момента я смогу заниматься трудоустройством?
Получить карьерную консультацию вы сможете уже в начале обучения. Остальные опции: помощь с резюме, добавление резюме в нашу базу специалистов и т.д. будут доступны после окончания обучения.
Я могу вернуть деньги?
Да, вы можете сделать возврат средств пропорционально оставшимся месяцам обучения.