ihatetomatoes
Создатель ihatetomatoes - профессиональный разработчик с более чем пятилетним опытом работы в одном из крупнейших электронных агентств Австралии.
Продолжительность
3 ч 9 мин
Категория
CSSКоличество уроков
16 Видео
Дата добавления
15 дек. 2017 г., 01:06
Язык
Английский
Дата обновления
28 апр. 2026 г., 22:45
Skrollr Workshop — это практический курс, который поможет вам освоить создание плавных анимаций при прокрутке с использованием SVG и построить современный одностраничный сайт с эффектными визуальными переходами. Подходит как новичкам, так и дизайнерам, которые хотят уверенно работать с анимацией и скролл‑эффектами.
Описание курса
На занятиях вы шаг за шагом разберёте принципы работы Skrollr, создадите собственную анимацию SVG и примените её в реальном макете. Курс разработан таким образом, чтобы вы могли повторить каждое действие без сложных знаний JavaScript. Мы сосредоточимся на визуальной логике, удобстве рабочего процесса и детальном понимании анимации как инструмента для современного веб‑дизайна.
Для кого подходит этот курс
- Тем, кто хочет научиться создавать элегантную анимацию прокрутки с использованием SVG и эффектов перекрёстного затухания.
- Новичкам без опыта работы с jQuery или JavaScript.
- Дизайнерам, стремящимся освоить параллакс‑эффекты и построить уникальные одностраничные сайты.
- Тем, кто уже пробовал работать с Skrollr, но столкнулся с трудностями.
Чему вы научитесь
Основы SVG‑анимации
- Создавать плавную анимацию SVG, похожую на эффекты на странице Squarespace 7 Cover.
- Понимать структуру SVG благодаря наглядной пошаговой демонстрации.
Работа с Skrollr
- Осваивать правильный рабочий процесс для создания, экспорта, встраивания и анимации SVG‑линий.
- Использовать возможности Skrollr для построения динамичных скролл‑эффектов без сложного кода.
Оптимизация рабочего процесса
- Ускорять работу благодаря лайфхакам и инструментам в Sublime Text.
Что потребуется перед началом
- Знание JavaScript не требуется.
- Базовые навыки работы с HTML5 и CSS3.
- Готовность изучать новые технологии и экспериментировать.
- Интерес к анимации и прокручиваемым интерфейсам.
Почему этот курс будет полезен
Skrollr Workshop позволяет не просто повторить готовый пример, но и понять, как устроена анимация в веб‑пространстве. Вы научитесь создавать эффектные динамические страницы, которые привлекают внимание и выделяют проект среди конкурентов. Это отличная возможность расширить свои навыки и улучшить визуальное качество ваших веб‑работ.
- Урок 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
Комментарии