- Регистрация
- 26.05.2022
- Сообщения
- 26 710
- Реакции
- 180
- Баллы
- 63
[HTML Academy] Онлайн-курс «Анимации, часть 1. CSS-анимации»
Пройдя курс, вы получите востребованный навык и сможете:
Улучшать пользовательский опыт взаимодействия с вашими интерфейсами
Делать анимации по наведению, скроллу или движениям мыши
Реализовывать задумки дизайнеров и делать современные анимации
Добавлять как простые микро-анимации, так и сложносоставные анимации
После прохождения курса вы сможете:
Самостоятельно добавлять в проект микро-анимации любого уровня
Собирать сложносоставные анимации: лоудеры, эффект Кена Бернса и т.п.
Добавлять анимации, зависимые от движения мыши --- например, параллакс
Менять положение элементов и их видимость по скроллу
Программа курса
Раздел 1
Введение в анимацию и веб-анимацию
--- Что такое анимации, какие они бывают и какой эффект дают
— С чего начать делать анимацию
— Теория анимации
Раздел 2
CSS-анимации по ховеру
— CSS Transitions, свойство и его применение
— Использование анимаций по ховеру и по клику
Раздел 3
CSS правило @keyframes и группа свойств Animation CSS
--- @keyframes и его применение
--- CSS аnimation или CSS переходы. CSS аnimation на практике
Раздел 4
Работа с анимациями с помощью JavaScript
— Какие анимации можно делать на CSS, используя JavaScript
— Как подружить CSS и JavaScript
— Использование CSS-анимаций по клику
— Использование CSS-анимаций по движению мыши
— Использование CSS-анимаций по скроллу
Раздел 5
Параллакс
— Параллакс на чистом CSS
— Параллакс на JavaScript
Раздел 6
Производительность CSS-анимаций
— Отслеживания изменений в CSS. Процесс перерисовки страницы
— Таймлайн для проектирования сложных анимаций
--- Инструменты для отладки анимации и производительности анимации
— Производительность. CSS анимация на GPU
— Медиазапросы prefers-reduced-motion и update
Раздел 7
Дополнительные материалы
--- Web Animation API
--- CSS Houdini
--- Библиотеки и инструменты для упрощения работы с анимациями, таймлайнами, SVG, canvas, WebGL
--- GSAP
Нужен организатор, который сможет выдать материал в удобном html формате как здесь
Продажник
Пройдя курс, вы получите востребованный навык и сможете:
Улучшать пользовательский опыт взаимодействия с вашими интерфейсами
Делать анимации по наведению, скроллу или движениям мыши
Реализовывать задумки дизайнеров и делать современные анимации
Добавлять как простые микро-анимации, так и сложносоставные анимации
После прохождения курса вы сможете:
Самостоятельно добавлять в проект микро-анимации любого уровня
Собирать сложносоставные анимации: лоудеры, эффект Кена Бернса и т.п.
Добавлять анимации, зависимые от движения мыши --- например, параллакс
Менять положение элементов и их видимость по скроллу
Программа курса
Раздел 1
Введение в анимацию и веб-анимацию
--- Что такое анимации, какие они бывают и какой эффект дают
— С чего начать делать анимацию
— Теория анимации
Раздел 2
CSS-анимации по ховеру
— CSS Transitions, свойство и его применение
— Использование анимаций по ховеру и по клику
Раздел 3
CSS правило @keyframes и группа свойств Animation CSS
--- @keyframes и его применение
--- CSS аnimation или CSS переходы. CSS аnimation на практике
Раздел 4
Работа с анимациями с помощью JavaScript
— Какие анимации можно делать на CSS, используя JavaScript
— Как подружить CSS и JavaScript
— Использование CSS-анимаций по клику
— Использование CSS-анимаций по движению мыши
— Использование CSS-анимаций по скроллу
Раздел 5
Параллакс
— Параллакс на чистом CSS
— Параллакс на JavaScript
Раздел 6
Производительность CSS-анимаций
— Отслеживания изменений в CSS. Процесс перерисовки страницы
— Таймлайн для проектирования сложных анимаций
--- Инструменты для отладки анимации и производительности анимации
— Производительность. CSS анимация на GPU
— Медиазапросы prefers-reduced-motion и update
Раздел 7
Дополнительные материалы
--- Web Animation API
--- CSS Houdini
--- Библиотеки и инструменты для упрощения работы с анимациями, таймлайнами, SVG, canvas, WebGL
--- GSAP
Нужен организатор, который сможет выдать материал в удобном html формате как здесь
Продажник
