ihatetomatoes
Создатель ihatetomatoes - профессиональный разработчик с более чем пятилетним опытом работы в одном из крупнейших электронных агентств Австралии.
Продолжительность
5 ч 2 мин
Категория
CSSКоличество уроков
31 Видео
Дата добавления
15 дек. 2017 г., 00:13
Язык
Английский
Дата обновления
28 апр. 2026 г., 22:44
ScrollMagic Workshop — практический курс, который поможет вам уверенно работать с одной из самых популярных библиотек анимации при прокрутке. Вы узнаете, как создавать эффектные интерактивные сценарии, не отвлекаясь на технические сложности и кросс-браузерные нюансы.
О курсе
ScrollMagic широко используется в современных веб‑проектах, включая сайты, удостоенные профессиональных наград. В сочетании с GreenSock библиотека позволяет создавать плавные, точные и визуально привлекательные анимации без лишней ручной работы. Этот курс поможет вам освоить основные и продвинутые приёмы, чтобы применить ScrollMagic в своих проектах максимально эффективно.
Чему вы научитесь
Работа с анимацией и триггерами
- Использовать CSS‑свойство clip вместе со ScrollMagic.
- Определять и устранять блокирующие элементы.
- Управлять элементами и их состояниями во время прокрутки.
- Запускать анимации строго в нужный момент.
- Работать с визуальными индикаторами для удобной отладки.
- Использовать невидимые триггеры и гибко настраивать их.
GreenSock и временные рамки
- Настраивать таймлайны GreenSock.
- Комбинировать ScrollMagic + GSAP для получения гибких и сложных эффектов.
- Полностью контролировать анимации и их последовательность.
Для кого подходит этот курс
- Для тех, кто владеет HTML и CSS и хочет расширить свой набор инструментов.
- Для новичков в jQuery и JavaScript.
- Для дизайнеров, стремящихся создавать собственные скролл‑анимации.
- Для всех, кто пробовал работать со ScrollMagic, но сталкивался с трудностями.
Что вы получите
- Пошаговое изучение API ScrollMagic.
- Практику работы с jQuery для взаимодействий и выбора элементов.
- Создание трёх полноценных проектов от начала до конца.
- Навыки построения продвинутых анимаций прокрутки.
Необходимые материалы и подготовка
- Рабочие файлы доступны для скачивания.
- Экспортированные SVG уже включены — дополнительные программы не нужны.
- Позитивный настрой и желание изучать современные технологии.
- Интерес к ScrollMagic, GreenSock и JavaScript.
- Урок 1.00:08:56How To Use setPin
- Урок 2.00:09:08How To Use CSS3 Clip Property
- Урок 3.00:06:17How To Pin and Overlap Multiple Sections
- Урок 4.00:08:30HTML, CSS – Layout and PSD Overview
- Урок 5.00:12:55Reveal Top Parts
- Урок 6.00:07:34Reset Position Before Animation
- Урок 7.00:07:19Reveal Bottom Part
- Урок 8.00:11:11Reveal Remaining Parts
- Урок 9.00:19:42HTML, CSS
- Урок 10.00:13:11HTML, CSS Layout
- Урок 11.00:13:04HTML, CSS Nav
- Урок 12.00:02:51A Quick Overview of HTML, CSS
- Урок 13.00:09:52HTML, scrolling container
- Урок 14.00:11:31Navigation Timeline
- Урок 15.00:12:23Trigger Animation when scrolling down
- Урок 16.00:06:00Trigger Animation when scrolling down
- Урок 17.00:06:21Setup CrossFade Animation
- Урок 18.00:19:40Page Load Animation
- Урок 19.00:15:11CrossFade Animation
- Урок 20.00:12:35CrossFade Animation Continue
- Урок 21.00:11:03CrossFade Animation Continue
- Урок 22.00:17:14SVG Animation
- Урок 23.00:05:18ScrambledText
- Урок 24.00:06:25Fine Tuning Slide One
- Урок 25.00:05:56Turning Animations Off
- Урок 26.00:02:01Final
- Урок 27.00:11:30Bonus – Navigation Click
- Урок 28.00:09:24How CSS Clip Property Works
- Урок 29.00:08:45How to scroll in multiple directions – HTML, CSS Structure
- Урок 30.00:05:38How to scroll in multiple directions – ScrollMagic Scene
- Урок 31.00:05:177 Tips For A Better Animation Workflow
Автор - ihatetomatoes
Комментарии