udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Изучите SVG анимацию - с помощью HTML, CSS и Javascript
Learn SVG Animation - With HTML, CSS & Javascript
★4.3 (всего оценок - 15)
Продолжительность
1 ч 23 мин
Категория
CSSКоличество уроков
22 Видео
Дата добавления
9 июл. 2020 г., 11:04
Язык
Английский
Дата выхода
23 авг. 2017 г., 11:00
Дата обновления
29 апр. 2026 г., 08:12
Освойте современные техники SVG‑анимации и узнайте, как использовать HTML, CSS и JavaScript для создания динамичных, выразительных и лёгких по весу визуальных эффектов. Этот курс поможет вам повысить ценность своих веб‑проектов и освоить навык, который сегодня особенно востребован в интерфейсной разработке.
Что вы изучите в этом курсе
Курс построен вокруг практики и поможет вам понять, как создавать гибкие и производительные SVG‑анимации, применимые в реальных веб‑проектах. Каждый модуль — это отдельная техника, которую вы сразу применяете на практике.
Основы работы с SVG
- Как устроен формат SVG и почему он идеально подходит для анимации
- Преимущества перед растровой графикой
- Подготовка SVG‑файлов в Adobe Illustrator
Инструменты и технологии
- Использование HTML и CSS для базовых анимаций
- Добавление интерактивности с помощью JavaScript
- Работа с CodePen для тестирования и демонстрации проектов
Практические проекты, которые вы создадите
Курс полностью построен на практике: всего за два часа вы разработаете серию выразительных SVG‑анимаций, которые сможете использовать в реальных клиентских проектах.
Проекты, включённые в обучение
- Анимация логотипов — создание эффектных фирменных движущихся элементов
- Анимация социальных иконок — повышение вовлечения пользователей
- Эффект рисования от руки — реалистичная прорисовка графики
- Свойства CSS анимации — трансформации, плавные переходы, тайминг
- Градиенты над текстом и значками — кросс‑браузерные техники
- Создание масок — сложные визуальные эффекты с низкой нагрузкой
- Работа с CodePen — организация и тестирование SVG‑процессов
- Оптимизация SVG — уменьшение веса файлов без потери качества
Почему этот курс полезен
SVG‑анимация стала стандартом для современного веб‑дизайна. Она помогает улучшить юзабилити, удерживать внимание пользователя и создавать яркие визуальные эффекты без тяжёлых скриптов и изображений.
Преимущества обучения
- Короткий, концентрированный формат — вы изучите самое важное без воды
- Реальные проекты, которые можно добавить в портфолио
- Подробные объяснения через видео‑скринкасты
- Все исходные материалы предоставлены
Для кого этот курс
Курс подойдёт веб‑дизайнерам, frontend‑разработчикам, а также всем, кто хочет улучшить визуальную составляющую своих проектов и изучить эффективные методы создания анимации.
Чему вы научитесь в результате
- Создавать лёгкие, масштабируемые и выразительные SVG‑анимации
- Использовать HTML, CSS и JavaScript для управления движением
- Работать с масками, градиентами, линиями и сложными эффектами
- Оптимизировать SVG для веба
- Применять полученные навыки в коммерческих проектах
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:02:22Course Introduction & Outline
- Урок 2. 00:02:54Create an SVG and access the code
- Урок 3. 00:01:15Optimise Code with OMGSVG
- Урок 4. 00:03:18Starting a New Project on Codepen.io
- Урок 5. 00:01:09Introduction to Project
- Урок 6. 00:04:54Drawing The SVG
- Урок 7. 00:04:48Create Line Animations
- Урок 8. 00:04:14Javascript Line Calculation
- Урок 9. 00:03:48Add Final Animations
- Урок 10. 00:08:28Monkey Animation
- Урок 11. 00:02:12CSS Animations - FROM/TO - Using Percentages
- Урок 12. 00:02:59Line Animation Directions
- Урок 13. 00:01:58Create SVG Text
- Урок 14. 00:04:08Animate Text Writing Effect
- Урок 15. 00:01:24Project Introduction
- Урок 16. 00:04:24Twitter Animation
- Урок 17. 00:04:06Youtube Animation
- Урок 18. 00:04:24Facebook Animation
- Урок 19. 00:05:44Gradient Project
- Урок 20. 00:04:27Using Texture's
- Урок 21. 00:10:03Advanced Masking Technique
- Урок 22. 00:00:31Congratulations & Thank You
Автор - udemy
Комментарии
Невозможно воспроизвести данный видеофайл.
(Код ошибки: 224003)