Курс по SVG-графике
Научитесь создавать и использовать интерактивные элементы интерфейса для сайта.
Чему научитесь
Если в двух слова, то на этом курсе научитесь создавать и использовать интерактивные элементы интерфейса для сайта.
Сможете анимировать векторные изображения, создавать базовые фигуры и делать прелоадеры.
Сможете анимировать векторные изображения, создавать базовые фигуры и делать прелоадеры.
Что вы получите
Короткие занятия
(15-25 минут)Нужно выделить 2 часа в своем графике для обучения. По нашей методике этого достаточно, чтобы научиться работать с JavaScript и начать на этом зарабатывать.
Ощутимый результат за несколько уроковПройдя все уроки, вы освоите инструмент, который позволит работать быстрее. Сможете работать быстрее — заработаете больше.
Вечный доступ к записям курсаВы не зависите от расписания курса — можно проходить, когда удобно вам.. Все записи и задания сохраняются и доступны онлайн в любое время.
Как проходит обучение
Смотрите видеоуроки
В каждом уроке коротко и содержательно раскрывается одна тема и дается нужная информация для закрепления материала. Уроки без воды – только суть. Всё показывается на экране как пошаговая инструкция.
Выполняете
домашнее задание
домашнее задание
Задания помогают усвоить материал и закрепить знания. Есть легкие домашние задания и усложненные. Легкие можно выполнить в течение 1 часа. На сложные потребуется больше времени.
Знакомство с курсом. Настройка рабочего пространства.
План урока:
План урока:
- Установка редактора кода
- Установка векторного редактора
Способы встраивания SVG графики в html структуру. Манипулирование с размерами изображения.
В этом уроке вы узнаете: как создавать svg-изображение, как размещать на странице
План урока:
В этом уроке вы узнаете: как создавать svg-изображение, как размещать на странице
План урока:
- Создаем и сохраняем svg для веба.
- Способы вставки SVG-изображения
- Через тег <img>
- Как background-image
- Через тег <svg>
- Через тег <object>
- Через тег <img>
- Работа с SVG-документов
- width, height
- viewBox
- preserveAspectRatio
- width, height
Создание базовый фигур. Работа с атрибутами и свойствами.
В этом уроке: вы познакомитесь с XML, научитесь редактировать svg прямо в html коде и познакомитесь с базовым синтаксисом.
План урока:
В этом уроке: вы познакомитесь с XML, научитесь редактировать svg прямо в html коде и познакомитесь с базовым синтаксисом.
План урока:
- Настраиваем рабочее пространство
- Переходим к практике:
- <rect> + подключение внешнего файла стилей
- <circle>
- <ellipse>
- <line>
- <polyline>
- path
Способы анимирования svg изображения, знакомство с библиотекой snap.js
В этом уроке вы узнаете: как анимировать векторное изображение с помощью css, js, SMIL.
В этом уроке вы узнаете: как анимировать векторное изображение с помощью css, js, SMIL.
- CSS анимирование
- SMIL
- JS (Snap.js)
Создаем свой собственный прелоадер с нуля.
В этом уроке вы узнаете: как сделать кастомный прелоадер для сайта.
В этом уроке вы узнаете: как сделать кастомный прелоадер для сайта.
- Создаем SVG-изображение
- Вставляем на страницу.
- Подключаем библиотеку SVG.js
- Анимируем, используя библиотеку SVG.js
Фильтры svg и зачем их использовать.
В этом уроке вы узнаете: как пользоваться фильтрами svg и как их использовать на практике.
В этом уроке вы узнаете: как пользоваться фильтрами svg и как их использовать на практике.
- Поддержка браузерами
- Фильтр цветовой матрицы. Меняем цвет карточки товара.
- Фильтр размытия. Создаем элемент с частичным размытием
- Смешивание фильтров. Создание элемента интерфейса - меню.
ИП Исламов Артем Данисович ОГРНИП: 318028000152678
ИНН 026408036102
ИНН 026408036102
Glo Academy