Это авторский перевод статьи с официального сайта Axure.
Источник: https://www.axure.com/blog/easy-window-scroll-effects-conditions/
Автор: Kip Mitchell
Дата публикации: 27 февраля 2018 г.
Перевод: Акшура 🔥 (https://t.me/axureaxure)
-----------------------------------------------------------------------------------------------
Простые скролл эффекты на базе логических условий
(этот пост является третьей частью из серии постов про использование логических условий в Axure RP. Вот первая часть, а вот вторая)
Есть что-то умиротворяющее в забавном и игривом лендинге. И в таком настроении, с хорошим одностраничником под рукой, всегда хочется добавить скролл эффектов - специальных перемещений или визуальных движений объектов, запускаемых как реакция на ваш (пользовательский) скролл страницы. (если говорить по-русски, то имеется в виду parallax эффект, когда объекты движутся с разными траекториями, скоростями и другими эффектами при скролле (прокрутке) страницы пользователем - п.а.) Добавить скролл эффекты в Axure RP очень просто с помощью логических условий.
(если вы не знакомы с логическими условиями Axure, то начните изучение с обучающей статьи по логическим условиям)
Во-первых, скачайте и посмотрите подготовленный файл .rp с примером к этому посту.
Во-вторых, посмотрите "живое" демо с этого файла на Axure Share. (А потом можете сравнить этот файл с исходным сайтом-призёром, с которого я черпал вдохновение для этого примера: lookbook-сайт детских тапочек Melanie F - осторожно, при загрузке автоматически включается музыка!)
Примечание: в файле прототипа Axure RP текст может выглядеть не так, как на демо - чтобы всё выглядело как надо, то прежде скачайте и установите шрифты с сайта Google Fonts, которые используются в прототипе: Lobster и Raleway.
На картинке выше показано сразу несколько скролл эффектов:
1. Скорее всего вы сразу заметите параллакс смещение, когда разные объекты движутся с разной скоростью. (Конкретно этот эффект не требует использования логических условий, только простая математическая формула. Подробнее об этом далее.)
2. Есть ещё пара визуальных эффектов: текстовые элементы, размещённые рядом с лого снизу по центру экрана, исчезают один за другим по мере скролла страницы.
3. "Плавающие" фигуры на фоне страницы меняют цвет в определённый момент.
4. И наконец, sticky header (когда шапка сайта прицепляется к верхней границе экрана и сохраняет своё положение при вертикальном скролле страницы - п.а.): логотип, который начинает движение снизу страницы, при достижении верхней части экрана фиксируется там и сохраняет положении при дальнейшем скролле страницы. (Я не буду углубляться в детали этого эффекта в данной статье, потому что уже есть отдельная обучающая статья по sticky header)
Давайте углубимся в изучение файла...
Параллакс смещение
В Axure RP есть несколько способов, чтобы сделать эффект параллакс смещения объектов. Конкретно в этом прототипе я это сделал, помещая все объекты на странице, которые будут задействованы в параллакс скролле, с закреплённые динамические панели, называемые "контентные панели с параллакс смещением". (В случае, если вы не знакомы с такого рода объектами, то вот наша обучающая статья по динамическим панелям со свойством "pin to browser" (закрепить на экране - есть такая функция по клику правой кнопкой мыши на динамическую панель - п.а.))
После того, как я закрепил все нужные объекты на экране браузера, чтобы они уже не смещались при скролле, я использую событие ("case" в Axure - п.а.) OnWindowScroll (при скролле окна браузера - п.а.), чтобы вернуть часть этого движения. Действие ("action" в Axure - п.а.), используемое в событии: "move to" (переместить -п.а.).
Я не хочу, чтобы мой контент смещался влево или вправо при скролле страницы, поэтому я устанавливаю координату по оси "x" в действии "move to" в следующем значении:
[[Target.x]]
Эта функция просто проверяет положение объекта по оси "x" до начала движения и устанавливает его в то же место после завершения движения.
Для координаты по оси Y я использую следующую формулу:
Y = SP + (-Window.scrollY * SF)
Где "SP" это стартовая позиция моего объекта, а "SF" это коэффициент скролла - величина, на которую я смещаю объект при скролле страницы. Коэффициент скролла должен иметь значение от 0 до 1 и показывать, на сколько переместится объект, когда вся страница сместится на 1 пиксель. Например, вот выражение для координаты по оси "Y", которое я использовал для заголовка страницы:
[[65 + (-Window.scrollY * 0.33)]]
Где "65" это положение заголовка страницы до начала движения: 65 пикселей от верхнего края экрана. Здесь же "0,33" это коэффициент скролла, означающий, что заголовок будет смещаться на одну треть от обычного смещения страницы (скролла страницы - п.а.).
Визуальные эффекты
Обратите внимание как надпись "scroll" на странице и вертикальная линия исчезают, как только вы начинаете скроллить страницу, а следом за ними исчезает и название компании. Как и параллакс эффект, эти визуальные эффекты настраиваются одним (ну, или парой) событий OnWindowScroll. Но, в отличие от параллакса, каждое из этих событий требует условия, которое проверяет текущее положение пользователя на странице. Ниже приведены соответствующие события, условия и действия из файла с примером выше:
OnWindowScroll (при скролле страницы делай следующее - п.а.)
показывай элементы, зависящие от скролла страницы
(If “[[Window.scrollY]]” is less than or equals “200”):
Show scroll prompt fade 500 ms
Show company name fade 500 ms
скрывай элементы scroll prompt (это название группы элементов в файле с примером - п.а.)
(Else If “[[Window.scrollY]]” is less than or equals “880”):
Hide scroll prompt fade 500 ms
Show company name fade 500 ms
скрывай название компании
Else If “[[Window.scrollY]]” is less than or equals “2380”):
Hide scroll prompt fade 500 ms
Hide company name fade 500 ms
Я использовал оператор "less than" (меньше, чем - п.а.) вместо "greater than" (больше, чем - п.а.), потому что хотел, чтобы в любой момент времени выполнялись только соответсвующие события. Если бы я использовал оператор "greater than 0" (больше, чем ноль - п.а.) для первого события выше, то условие выполнялось бы всегда, несмотря на то, сколько уже пользователь проскроллил страницу, и ни одно из моих следующих событий никогда бы уже не запустилось.
Эффект смены цвета
Обратите внимание, что название компании исчезает, только когда цвет фигур на фоне сменяется на оранжевый.
Внимательный читатель наверняка обратит внимание, что события, описанные выше, не совсем такие же, как в .rp файле с примером, где эти события содержат дополнительные действия. Ниже привожу полное описание событий, где ранее недостающие действия выделил жирным:
OnWindowScroll
показывай элементы, зависящие от скролла страницы
(If “[[Window.scrollY]]” is less than or equals “200”):
Show scroll prompt fade 500 ms
Show company name fade 500 ms
скрывай элементы scroll prompt
(Else If “[[Window.scrollY]]” is less than or equals “880”):
Hide scroll prompt fade 500 ms
Show company name fade 500 ms
Set triangle panel to blue,
waves (small) panel to blue,
circle (small) panel to blue,
hexagon panel to blue,
waves panel to blue,
triangle (small) panel to blue,
square panel to blue,
circle panel to blue
скрывай название компании
(Else If “[[Window.scrollY]]” is less than or equals “2380”):
Hide scroll prompt fade 500 ms
Hide company name fade 500 ms
Set triangle panel to orange,
waves (small) panel to orange,
circle (small) panel to orange,
hexagon panel to orange,
waves panel to orange,
triangle (small) panel to orange,
square panel to orange,
circle panel to orange
Несмотря на то, что теперь они выглядят такими длинными, по сути эти две добавленных порции команд являются всего лишь одним простым действием. "Плавающие" фигуры на фоне страницы это всего лишь динамическая панель с двумя состояниями ("stage" в Axure - п.а.): в одном состоянии фигуры выполнены в синем цвете, а во втором состоянии они сделаны оранжевыми; и действия, выделенные жирным, переключают два состояния динамической панели друг за другом, создавая, таким образом, эффект смены цвета.
Примечание: Если вы хотите, чтобы смена цвета объектов происходила только между двумя оттенками (имеется в виду, что при использовании динамических панелей можно создать сколько угодно состояний с разными цветами и перемешивать их все, то тут в примечании речь идёт о варианте, когда достаточно сделать эффект смены цвета только из двух вариантов цвета объектов - п.а.), то для смены цвета объекта вы можете использовать состояние объекта "выбранный" ("selected" в Axure - п.а.) и при смене действий выбран/не выбран вы сможете менять цвет объектов, без необходимости использовать динамические панели. Я показал пример на основе динамических панелей, потому что он более расширяем, например, если вы захотите использовать состояния объектов в шести разных цветах.
