Udemy [Udemy] Alexandr Tyurin - Интерактивная веб-анимация [JavaScript, SVG, CSS и HTML] (2020)

[Gatsby]

Автор: Udemy - Alexandr Tyurin
Название: Интерактивная веб-анимация [JavaScript, SVG, CSS и HTML] (2020)



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

• 1. История веб-анимации
• 2. CSS-анимация [свойства CSS-анимации, правило ключевых кадров, переходы]
• 3. Анимация SVG [элементы, атрибуты и свойства SVG, которые можно анимировать] ...... JS !!! -> ВНУТРИ
• 4. Интерактивная анимация JavaScript [методы анимации JavaScript, функции конструкторов, API веб-анимации]
• 5. В этом курсе представлены 20 анимационных проектов, иллюстрирующих теорию интерактивной веб-анимации. Все они доступны для скачивания, изучения и обновления.

Требования

• Для первого знакомства с веб-анимацией дополнительных знаний не требуется. Для более глубокого усвоения материала желательно начальное знание HTML, CSS, SVG, JavaScript.
• Текстовый редактор, веб-браузер и подключение к Интернету

Описание
Интерактивная веб-анимация [JavaScript, SVG, CSS и HTML]

Полная спецификация веб-анимации на уровне языков разметки CSS и SVG и языка программирования JavaScript.

Методика преподавания этого курса:

-> Тема исследования ->
-> постановка конкретной задачи ->
-> реализация ->
-> теоретический обзор метода ->
-> Выводы

Особенности методики преподавания по данному курсу:

Шаг за шагом к иммерсивной веб-анимации:

• Обзор появления техник сюжетной анимации
• Теория: полный обзор спецификаций CSS, SVG, Javascript на уровне технологий веб-анимации.
• Практическая часть: анимационные проекты от простого CSS через SVG до сложных проектов CSS + SVG + JavaScript.

Цель этого курса онлайн:

• пробуждение интереса к предмету слушателя;
• Изучение оригинальных инструментов веб-анимации;
• погружение в реализацию конкретных проектов веб-анимации и их самостоятельная модернизация
• подготовка к написанию библиотек веб-анимации;

ПРОГРАММА:

1. История веб-анимации
2. CSS-анимация

• Свойства анимации CSS
• Правило ключевых кадров CSS
• Переходы CSS

3. SVG-анимация

• Элементы анимации SVG
• Атрибут для идентификации целевого элемента для анимации
• Атрибуты для управления временем анимации
• Атрибуты, определяющие значения анимации с течением времени
• Атрибуты, управляющие добавлением анимации
• Элементы, атрибуты и свойства SVG, которые можно анимировать, а также мы изучим событие времени интерфейса
• Интерактивные функции в SVG

4. Анимация JavaScript

• метод getElementById ()
• Метод планирования звонков setinterval ()
• метод addEventListener ()
• методы getAttribute и setAttribute
• Как проникнуть в сложные SVG-атрибуты элементов с помощью регулярных выражений
• 3d positioning
• Функции конструкторов
• Создание примитивов SVG
• Создание массивов объектов, управление их свойствами
• Возможности веб-анимации с использованием масок и пути клипа
• API веб-анимации
• Сочетание анимационных приемов

Все практические примеры анимации из этого курса доступны для скачивания и экспериментирования.

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

• Этот курс для тех, кто хочет освоить интерактивную веб-анимацию.
• Этот курс необходим тем, кто хочет оживить свой сайт и использовать незабываемый дизайн UX / UI!

Субтитры: Русский (авторские), Английский
Язык: Английский

Подробнее:

Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.