ihatetomatoes
Создатель ihatetomatoes - профессиональный разработчик с более чем пятилетним опытом работы в одном из крупнейших электронных агентств Австралии.
Продолжительность
5 ч 2 мин
Категория
CSSКоличество уроков
31 Видео
Дата добавления
15 дек. 2017 г., 00:13
Язык
Английский
Дата обновления
15 дек. 2017 г., 00:13
ScrollMagic - самая популярная библиотека анимации прокрутки, используемая на лучших удостоенных наград веб-сайтах. Я использую ScrollMagic и GreenSock в своих интерактивных проектах уже несколько лет, чтобы сосредоточиться на креативном написании кода, вместо кросс-браузерных проблем, это бесценно.
Что вы будете изучать на этом курсе?
- Как использовать свойство CSS clip с помощью ScrollMagic.
- Как выявить блокирующие элементы.
- Как легко манипулировать элементами.
- Как запускать анимацию в нужное время.
- Как использовать индикаторы для отладки.
- Как использовать невидимые триггеры.
- Как установить временные рамки GreenSock.
- Как полностью контролировать содержимое и анимации.
Кто может смотреть этот курс ?
- Любой, у кого есть знание HTML и CSS.
- Любой, у кого мало или вообще нет jQuery / JavaScript навыков.
- Дизайнеры, которые хотели бы создавать собственные скролл анимации.
- Любой, кто когда-либо пытался использовать ScrollMagic и считал его слишком тяжелым.
Чего ты научишься ?
- API ScrollMagic в простых пошаговых демонстрациях.
- Мы будем использовать jQuery для выбора элементов и других пользовательских взаимодействий.
- Построите 3 проекта от начала до конца.
- Как создать более продвинутую анимацию прокрутки.
Что вам нужно перед началом ?
- Все рабочие файлы доступны для загрузки.
- Экспортированные SVG также включены, нет необходимости устанавливать Illustrator или Sketch для завершения этого курса.
- Позитивное отношение к изучению новых технологий.
- Настоящий интерес к анимации 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
Другие материалы в этой категории
Комментарии