Мастер анимаций: CSS и JS-анимации [HTML Academy]

Складчина: Мастер анимаций: CSS и JS-анимации [HTML Academy]

Курс помогает научиться анимировать карточки товаров, аккордеоны, модальные окна и другие элементы сайта, делая это быстро и корректно.
Подойдёт тем, кто уже знает основы HTML, CSS и JavaScript и хочет перейти к более сложным анимациям.

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

• Создавать простые и сложные анимации.
• Делать эффекты по скроллу.
• Настраивать параллакс и 3D-анимации.
• Работать с hover-эффектами и движением мыши.
• Делать зацикленные анимации.
• Использовать глитч-эффект.
• Создавать эффект Кена-Бёрнса.

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

• Анимация элементов сайта
• Анимация карточек
• 2D-параллакс
• Глитч-эффект
• 3D-поворот карточек
• 3D-анимация сайта

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

Раздел 1. Основы анимации
Узнаете о принципах работы с анимациями, научитесь использовать CSS-свойство transition и создадите простые анимационные переходы в CSS.
— Способы создания анимаций
— Физиология восприятия анимации. Понятие FPS
— CSS-свойство transition
— Примеры простых анимаций с использованием одного элемента
— Принципы создания анимации
— Практика: переходы при наведении на кнопки, анимация карточек товаров для интернет-магазина, переходы на кнопках соцсетей
— 10 пошаговых демонстраций с примерами создания анимаций
— Тест по разделу

Раздел 2. CSS-анимации по ховеру
Рассмотрим CSS-свойство transition-timing-function и узнаете о часто встречающихся ошибках при создании анимаций. Создадите более сложные анимационные переходы и сценарии анимаций.
— Свойство transition-timing-function
— Частые ошибки при создании простых анимаций
— Примеры анимаций с использованием дочерних элементов и псевдоэлементов
— Практика: усложнённая анимация карточек товара, анимации ссылок и кнопок
— 14 пошаговых демонстраций с примерами создания анимаций
— Тест по разделу

Раздел 3. CSS правило @keyframes и группа свойств animation CSS
Разберёте анимации, созданные с помощью @keyframes, и группу свойств animation.
— Правило @keyframes и его применение
— CSS-свойства animation и transition. Использование animation на практике
— Смягчение начала и конца движения
— Подготовка (упреждение)
— Практика: анимирование элементов сайта премиальных беговых кед
— 8 пошаговых демонстраций с примерами создания анимаций
— 2 тренажёра по CSS-анимациям
— Тест по разделу

Раздел 4. Анимации с пользовательским взаимодействием
Научитесь добавлять анимации при клике, движении мыши и прокрутке страницы.
— Использование CSS-анимаций по клику
— Событие анимации
— Анимация открытия и закрытия меню
— Бесконечный слайдер изображений
— Анимация изображений и подписи слайдера
— Аккордеон с поочерёдным переключением вкладок
— Табы с анимацией переключения
— Анимации по скроллу
— Практика: создание анимаций по клику и скроллу
— 17 пошаговых демонстраций с примерами создания анимаций
— Тест по разделу

Раздел 5. 3D в CSS и параллакс-эффект
Узнаете, как создавать эффект параллакса и эффектные 3D-анимации.
— Параллакс-эффект и 3D-трансформации в CSS
— 3D-трансформации с JavaScript
— Практика: создание 3D-эффектов для карточек товаров, шапки страницы и анимации первого экрана сайта
— 12 пошаговых демонстраций с примерами создания анимаций
— Тест по разделу

Раздел 6. Производительность CSS-анимаций
Познакомитесь с инструментами для отладки и научитесь оптимизировать анимации.
— Линейные и покадровые анимации
— Инструменты для отладки анимации и производительности анимации
— Оптимизация производительности CSS-анимации
— Медиазапросы prefers-reduced-motion и update
— Тест по разделу

Раздел 7. Итоговый раздел
— Подводим итоги курса
— Библиотеки CSS-анимаций
— Финальный тест

Формат: профессиональный онлайн-курс
Уровень: для разработчиков, которые хотят прокачать UI-анимации

Цена: 44900 руб.
Скрытая ссылка