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