Открыто

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

Тема в разделе "Курсы по программированию", создана пользователем svetakrotor, 24 апр 2026 в 16:46.

Основной список: 11 участников

  1. 24 апр 2026 в 16:46
    #1
    svetakrotor
    svetakrotor СкладчикСкладчик

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

    2026-04-24_16-29.png

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

    1. Teloriel
      Teloriel участвует в складчине.
      29 апр 2026 в 02:28
    2. Masha-123
      Masha-123 участвует в складчине.
      29 апр 2026 в 00:06
    3. skladchik.com
      В складчине участвует 10 человек(а).
      29 апр 2026 в 00:06
    4. arzhanev
      arzhanev участвует в складчине.
      27 апр 2026 в 13:44