Скачать [HTML Academy] Профессиональный онлайн-курс «Мастер анимаций: CSS и JS-анимации»

[Принц]

Складчина: [HTML Academy] Профессиональный онлайн-курс «Мастер анимаций: CSS и JS-анимации»


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

Курс помогает научиться анимировать карточки товаров, аккордеоны, модальные окна и другие элементы сайта, делая это быстро и корректно.
Подойдёт тем, кто уже знает основы 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-анимаций
— Финальный тест






СКАЧАТЬ

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