frontendmasters
FrontendMasters - Одна из самых лучших площадок для изучения Frontend. Видеокурсы ведут ведущие люди в этой отрасли.
Продолжительность
4 ч 12 мин
Категория
Другое (Frontend)Количество уроков
57 Видео
Дата добавления
30 нояб. 2018 г., 21:15
Язык
Английский
Дата выхода
29 нояб. 2018 г., 22:59
Дата обновления
24 янв. 2019 г., 17:01
SVG (масштабируемая векторная графика) независимы от разрешения, масштабируемы для реагирования и легко перемещаются по DOM. Узнайте, как использовать этот надежный графический формат, а также как создавать сложные анимации для множества вариантов использования в Интернете. В этом обновленном семинаре вам расскажут о практических примерах UI / UX, вы узнаете, как создавать графику с впечатляюще маленькими файлами, и получать удовольствие от творческих приемов.
- Изучите platonic shapes, команды пути и все о атрибуте viewBox.
- Узнайте, как построить SVG-графику как в коде, так и в графических программах, и правильно оптимизируйте их.
- Как создать временные рамки с взаимодействием и сделать сложные анимации, готовые к производству.
- Как сделать SVG совместимым со всеми браузерами, и как оптимизировать производительность.
- Как использовать многофункциональный API GreenSock для различных эффектов погружения.
- Как использовать различные инструменты и методы для создания бесшовной и привлекательной комплексной анимации SVG, которая помогает вашим пользователям и дополняет ваш брендинг.
https://github.com/sdras/svg-workshop
Посмотреть больше
Удален по просьбе правообладателя
- Урок 1.00:06:31Introduction & Setup
- Урок 2.00:03:59What is SVG?
- Урок 3.00:03:50SVG Support & Performance
- Урок 4.00:02:29The Antidote to Positioning in CSS
- Урок 5.00:05:52Platonic Shapes
- Урок 6.00:01:52viewBox & Responsive
- Урок 7.00:04:37preserveAspectRatio
- Урок 8.00:10:33Paths, Groups, & Polylines
- Урок 9.00:02:33Animated Bézier Curves & Template Literals
- Урок 10.00:02:48Accessibility
- Урок 11.00:06:20Optimizing & Building
- Урок 12.00:08:14Constructing an SVG
- Урок 13.00:03:52Starting an SVG
- Урок 14.00:02:53Prototyping
- Урок 15.00:00:52Planning an Animation Exercise
- Урок 16.00:02:22Planning an Animation Review
- Урок 17.00:02:15Animation Support Breakdown
- Урок 18.00:04:17Differences in Functionality
- Урок 19.00:02:22Why SVG?
- Урок 20.00:01:37Transform-Origin
- Урок 21.00:00:15Animate an SVG Exercise
- Урок 22.00:03:03SVG Tools and Ideas Q&A
- Урок 23.00:10:42Sprites
- Урок 24.00:05:08Atmospheric & Elemental Motion
- Урок 25.00:12:17Tools Overview
- Урок 26.00:07:50Performance & GSAP
- Урок 27.00:03:54TweenMax Syntax
- Урок 28.00:03:12Stagger
- Урок 29.00:01:04GSAP Monster Demo
- Урок 30.00:01:35Cycle Stagger
- Урок 31.00:01:45Setting CSS Properties
- Урок 32.00:01:20Comments on D3
- Урок 33.00:12:47Timeline
- Урок 34.00:09:08GSAP Demo
- Урок 35.00:00:25GSAP Exercise
- Урок 36.00:08:22UI vs Standalone Animation
- Урок 37.00:02:00Social Engineering with Animation
- Урок 38.00:01:42Context Switching
- Урок 39.00:04:09Improving an Existing UI Demo
- Урок 40.00:02:43Interaction, JS Detection, & Scaling
- Урок 41.00:01:34Interaction & GSAP Timeline Functions
- Урок 42.00:02:53Interaction Demo
- Урок 43.00:07:38Draggable
- Урок 44.00:00:44Interactive Exercise
- Урок 45.00:06:32DrawSVG
- Урок 46.00:03:03Motion Along a Path
- Урок 47.00:04:36Curviness & Rotation
- Урок 48.00:06:04Animating Text
- Урок 49.00:06:29Relative Color Values
- Урок 50.00:00:30Creating a Story Exercise
- Урок 51.00:12:59MorphSVG
- Урок 52.00:09:42Bonus Demos
- Урок 53.00:00:22Shape Morph Exercise
- Урок 54.00:08:22Clipping & Masking
- Урок 55.00:03:36viewBox
- Урок 56.00:04:04svgOrigin
- Урок 57.00:00:19Thanks!
Автор - frontendmasters
![Основы SVG [полное руководство по спецификации языка 2020]](https://cdn.coursehunter.net/courses/260x159/osnovy-svg-polnoe-rukovodstvo-po-specifikacii-yazyka-2020.webp)
Комментарии
Imagine being this unimaginative to boar the students with so much theory in such a fun domains a SVG. Terrible.