ihatetomatoes
Создатель ihatetomatoes - профессиональный разработчик с более чем пятилетним опытом работы в одном из крупнейших электронных агентств Австралии.
Skrollr Workshop
Продолжительность
3 ч 9 мин
Категория
CSS
Количество уроков
16 Видео
Дата добавления
15 дек. 2017 г., 01:06
Язык
Английский
Дата обновления
15 дек. 2017 г., 01:06
Узнайте как создать сайт с элегантной анимацией прокрутки SVG. Вы хотите освоить Skrollr и SVG анимацию? Этот курс Skrollr является прекрасным дополнением к мастер-классу по скроллинг Parallax. Позвольте мне провести вас через мой рабочий процесс и научить вас, как построить современный, прокручиваемый сайт, на одной странице без каких-либо головных болей.
Для кого этот курс?
- Любой, кто интересуется, как создать элегантную анимацию прокрутки с SVG и эффектом перекрестного затухания.
- Любой, у кого мало или вообще нет jQuery / JavaScript знаний.
- Дизайнеры, которые пытаются создавать сайты параллакса или строить свои собственные.
- Любой, кто когда-либо пытался использовать Skrollr и считал его очень запутанным.
Чего мы научимься ?
- Как создать элегантную анимацию SVG, похожую на страницу Squarespace 7 Cover.
- SVG объясняется простой пошаговой демонстрацией.
- Идеальный рабочий процесс для создания, экспорта, встраивания и анимации SVG-линии с помощью Skrollr.
- Как ускорить рабочий процесс с Sublime Text.
Что нужно перед началом прохождения курса ?
- Знание JavaScript не требуется.
- Рабочие знания html5 и css3.
- Позитивное отношение к изучению новых технологий.
- Подлинная заинтересованность в анимации с прокруткой.
Посмотреть больше
-
Урок 1. 00:05:58Introduction
-
Урок 2. 00:11:31Creating SVG In Illustrator
-
Урок 3. 00:10:20Exporting SVG From Photoshop And Illustrator
-
Урок 4. 00:13:17Full-Screen Background Image
-
Урок 5. 00:15:13Resizing The SVG To Fullscreen
-
Урок 6. 00:03:42Multiple Background Containers
-
Урок 7. 00:15:39Data-Attributes To Fade Out Text And Draw SVG Line
-
Урок 8. 00:14:04Draw SVG Line Continue
-
Урок 9. 00:10:17Cross-Fade Transitions and Adding Easing
-
Урок 10. 00:09:35Fading In First Features
-
Урок 11. 00:09:15Fading Features Reveal
-
Урок 12. 00:09:11Animating iMac From The Right
-
Урок 13. 00:11:54Zoom out iMac And Fade In CTA Button
-
Урок 14. 00:23:40Mobile And Responsive Approach
-
Урок 15. 00:11:54Turn It Off For Mobile
-
Урок 16. 00:13:45Adding Skrollr Menu
Автор - ihatetomatoes
Категории
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Другие материалы в этой категории
ihatetomatoes
15 дек. 2017 г., 00:47
Parallax скроллинг. Мастер Класс
Parallax Scrolling Master Class
Узнайте как создать сайт со скроллом parallax с нуля. Вы устали копировать код со случайных сайтов или обучающих курсов ? Вы смущены атрибутами данных Skrollr? Узнайте, как создавать анимацию прокрутки без каких-либо головных болей.
cssanimation.rocks
7 мая 2018 г., 08:06
Повысьте свои навыки css анимации - практический курс
Level up your CSS animation skills
Повысьте свои навыки анимации CSS! Этот видеокурс даст вам практический опыт, который вам нужно повысить и продать свои навыки анимации в качестве дизайнера или разработчика. В течение нескольких часов пошаговых руководств мы вместе создадим анимированную целевую страницу и узнаем, как анимация может оживить ее.Это практический курс, полный реальных загружаемых примеров кода. Вы сможете взять знания, а также реальный рабочий код, в свои проекты и