Мастер анимаций: CSS и JS-анимации

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