Подробнее ScrollMagic

Подробнее ScrollMagic

У нас уже есть руководство по ScrollMagic, но давайте рассмотрим еще один пример его возможностей, чтобы точно понять, как мы можем работать с этой библиотекой..

Пример, который мы здесь приведем, не будет намного сложнее, а скорее даст другую точку зрения и то, как работать с различными параметрами и настройками..

Исходные (образцы) файлы

Для начала мы будем использовать готовые файлы HTML / CSS, которые вы можете получить из первого коммита в GitHub в проект, который я создал для этого руководства..

Конечный эффект, к которому мы будем стремиться, заключается в том, чтобы заголовки различных разделов вращались в верхней части сайта, как бегущая строка. Кроме того, мы постараемся добавить эффект затухания к основным контейнерам..

ScrollMagic JavaScript

Начнем с вспомогательной константы, как и в прошлый раз:

const vh = window.screen.availHeight / 100;

А затем создадим наш контроллер ScrollMagic:

const controller = новый ScrollMagic.Controller ();

Напомним, что мы делаем контроллер для каждой полосы прокрутки, на основе которого хотим делать анимацию. В большинстве случаев у вас будет один контроллер на одной странице. Мы сделаем исключения, если у вас есть элемент с внутренней прокруткой, и вы хотите, чтобы на его основе были другие анимации..

Вступительное название

Во-первых, давайте анимируем основной заголовок страницы..

Мы будем обрабатывать его иначе, чем заголовки отдельных разделов, по 2 причинам:

  1. Однако это основное название (оно другое). Разве что в разметке H1, а остальные H2 и есть шрифт большего размера (дизайн другой)
  2. Мы хотим, чтобы этот заголовок был виден сразу после загрузки страницы, чтобы он начинался с середины и просто шел вправо. Остальные сначала «войдут» в экран, а потом пройдут через него..

Закрепите вертикально на экране с помощью ScrollMagic

Сначала вы закрепите его на экране, чтобы при прокрутке вниз он оставался на месте вертикально, а не вверх:

const introTitlePin = new ScrollMagic.Scene ({triggerElement: ‘.intro__title’, triggerHook: 0}) .setPin (‘. intro__title’) .addTo (контроллер);

triggerElement — это сам заголовок, а triggerHook — 0, что означает «когда он находится в верхней части экрана». В любом случае он находится в верхней части экрана, но мы устанавливаем triggerHook таким образом, чтобы у нас не было двусмысленности в отношении ожидаемого поведения..

Читать также:  Начало работы в HTML некоторые основные теги

Затем мы просто вызываем метод setPin (), закрепляя сам заголовок. И мы добавляем всю сцену в наш контроллер.

Давайте вспомним, что мы делаем сцену для каждой отдельной анимации, которую хотим. Или хотя бы при фиксации элемента на экране, как в примере выше.

Горизонтальная анимация с помощью ScrollMagic

Затем давайте добавим анимацию Tween (теперь мы переходим к интеграции GSAP со ScrollMagic), чтобы переместить заголовок вправо в конец экрана:

const titleSwipe = new ScrollMagic.Scene ({triggerElement: ‘.intro__title’, triggerHook: 0, duration: 50 * vh}) .setTween (new TweenLite.fromTo (‘. intro__title’, 1, {x: 0}, {x : ‘100%’})) .addTo (контроллер);

Триггером снова является само название. Здесь мы добавляем продолжительность анимации: половина экрана (50 * vh). Таким образом, заголовок начинается с середины (по горизонтали) экрана, и после прокрутки половины экрана будет выполняться анимация..

Мы устанавливаем эту анимацию в разделе setTween, который создает новую анимацию fromTo, которая начинается с x: 0, что похоже на left: 0 в CSS. Разница в том, что GSAP не только короче с x, но и фактически использует transform: translateX () для изменения этого значения. Таким образом, работа передается с процессора на видеокарту, что в большинстве случаев приводит к повышению производительности..

Окончательные значения в анимации fromTo передаются другому объекту, доступному в функции. Если бы у нас было только from или только это, у нас был бы один объект со стилями. Однако для fromTo мы должны указать обе пары, каждая со своим собственным объектом.

Пока у нас есть этот первый коммит с анимацией вступительного заголовка: https://github.com/magadanskiuchen/scroll-magic-demo/commit/2b31ef2743e6b4b019b5a6e5f5f340927807d5eb

Подзаголовки

Настала очередь подзаголовков.

Поскольку они являются внутренними элементами каждого .screen, за исключением .screen — intro исходных файлов, вещи делают JavaScript константой с помощью следующих элементов:

const screen = document.querySelectorAll (‘. screen: not (.screen — intro)’);

Цикл с синтаксисом ES6

В предыдущих уроках я мог использовать этот синтаксис, не объясняя его сначала..

Теперь позвольте мне отклониться от основного урока и сказать несколько слов по этому поводу..

Массивы или NodeList (список элементов, полученных из querySelectorAll) можно обвести с помощью .forEach. Сам по себе это не синтаксис ES6, но для этого forEach должна быть предоставлена ​​функция обратного вызова для выполнения для каждого элемента..

Читать также:  Начало работы в JavaScript циклы

В принципе, мы бы написали такую ​​функцию обратного вызова как:

someArray.forEach (function (element) {// действия, которые мы выполняем над этим элементом});

С синтаксисом ES6 для удобства (и с сохранением области действия ключевого слова this в случае объектно-ориентированного JavaScript) мы можем опустить ключевое слово function. Кроме того, если у нас есть только один аргумент, мы можем опустить круглые скобки вокруг него, а перед большими / фигурными скобками написать =.

Получаем:

someArray.forEach (element => {// действия, которые мы выполняем над этим элементом});

Обычно forEach принимает 3 аргумента. В JavaScript нам не требуется определять необязательные аргументы в функциях обратного вызова, поэтому приведенное выше будет действительным, но если мы хотим воспользоваться остальными, нам придется вернуть круглые скобки:

someArray.forEach (element, index, wholeArray) => {// действия, которые мы выполняем над этим элементом});

index — порядковый номер элемента (начиная с 0 для первого элемента) в списке. allArray — это то же самое, что someArray в приведенном выше примере (если нам нужно основывать манипуляции на каком-то другом элементе массива).

Однако мы также можем еще больше упростить работу. Если фактическая работа, которую мы выполняем в функции обратного вызова, — это только одна строка, мы можем пропустить большие / фигурные скобки:

someArray.forEach (element => element.incrementSomething ());

В приведенном выше примере, если у нас есть массив элементов, мы можем вызвать метод incrementSomething () каждого из элементов в этом массиве..

Переключайте наши экраны

Теперь сделаем:

screens.forEach (screen => {const heading = screen.querySelector (‘. screen__title’);});

с помощью которого мы обходим все экраны и берем заголовки в постоянном.

Закрепление и горизонтальная анимация субтитров с помощью ScrollMagic

В целом это похоже на работу, которую мы уже проделали для основного заголовка, но давайте сделаем следующее:

новый ScrollMagic.Scene ({triggerElement: screen, triggerHook: 0}) .setPin (заголовок) .addTo (контроллер);
new ScrollMagic.Scene ({triggerElement: screen, triggerHook: 0.55, duration: 90 * vh}) .setTween (new TweenLite.fromTo (heading, 1, {x: ‘-100%’, y: 0}, {x: ‘100%’, y: 0})) .addTo (контроллер);

Отличия заключаются в следующем:

  1. Мы размещаем сцены на экране (это ссылка, которую мы передаем в triggetElement)
  2. triggerHook в горизонтальной анимации — 0,55, потому что мы хотим, чтобы отображение заголовка начиналось, когда экран почти достиг середины экрана.
  3. x измените его с -100% на 100% — теперь сначала появляется на экране слева и идет направо.
Читать также:  DISC категоризация людей в зависимости от того как они работают

Поскольку приведенное выше приводит к размещению заголовков на той высоте, на которой они были бы, если бы у них не было position: fixed (ScrollMagic намеренно делает это, чтобы все выглядело более естественно), нам нужно добавить немного CSS, чтобы эти заголовки были исправлены перед это и самая верхняя часть экрана:

.screen__title: not (.intro__title) {position: fixed; верх: 0; ширина: 100%; }

Резюме: мы внесли следующие изменения: https://github.com/magadanskiuchen/scroll-magic-demo/commit/cf334810e7c543dd3a9388f9a7544173da9d5b74

Появление самих экранов с помощью ScrollMagic

Для этого мы создадим еще одну сцену с tween, в которой мы изменим непрозрачность экрана с 0 на 1 с помощью scroll:

new ScrollMagic.Scene ({triggerElement: screen, triggerHook: 0.9, duration: 50 * vh}) .setTween (new TweenLite.fromTo (screen, 1, {opacity: 0}, {opacity: 1, easy: Power3.easeInOut}) )) .addTo (контроллер);

Я установил для triggerHook значение 0.9, это означает, что нижние 10% экрана прозрачны, и только после этого начинается анимация..

продолжительность — половина экрана.

Сам анимация снова принадлежит команде fromTo, сначала установив непрозрачность: 0, и наконец: opacity: 1. Для более приятной анимации я добавил замедление, которое в fromTo передается вместе с объектом со стилями..

Немного сместите изображение

А поскольку только одно нарастание — это слишком элементарный эффект, давайте добавим сдвиг изображения вверх:

new ScrollMagic.Scene ({triggerElement: screen, triggerHook: 0.75, duration: 50 * vh}) .setTween (new TweenLite.to (screen.querySelector (‘. content__image’), 1, {y: 0, easy: Power1. easyOut})) .addTo (контроллер);

Делаем еще одну сцену, где триггер снова сам экран. На этот раз мы хотим, чтобы смещение начиналось после того, как экран уже прошел 25% нижнего края экрана (соответственно, он непрозрачен)..

В самом промежуточном кадре мы устанавливаем y, чтобы изменить изображение на 0, с более пологой плавностью..

Поскольку здесь, в JavaScript, у нас нет от tween-анимации, нам нужно только добавить следующие стили ко всем изображениям по умолчанию:

.content__image {преобразование: translateY (30%); }

Или вообще у нас https://github.com/magadanskiuchen/scroll-magic-demo/commit/056471581c217c51acbf988d464e264f583051fb

Результат

Окончательный код доступен по адресу https://github.com/magadanskiuchen/scroll-magic-demo, а предварительный просмотр доступен по адресу https://magadanski.com/demo/parallax-scrollmagic-2/. .

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?