Интерактив в Axure — самые востребованные приемы. Часть II

В этой части вы узнаете, как создать эффект параллакса в прототипе.

Эффект параллакса

Эффект параллакса («смена, чередование») — это изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя.

С помощью этого приема можно сделать прототип более наглядным — на ранней стадии разработки сайта продемонстрировать анимацию и удивить клиента красивым эффектом.

Создайте фон. Откройте вкладку Style, Back image, нажмите на кнопку Import, загрузите изображение фона. Из выпадающего списка, который находится ниже, выберите Image Repeat для того, чтобы замостить изображением всю видимую часть проекта.

Для демонстрации параллакс-эффекта будем использовать примитивы box (далее по тексту виджет).

Расположите созданные вами виджеты по вертикали с разными промежутками. получилось вот так:

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

В самом низу после виджетов поместили надпись End Parallax, символизирующую окончание скроллинга.

После того, как вы определились с расстановкой виджетов, перейдите во вкладку Properties и выберите событие OnWindowScroll — во время этого события мы будем двигать виджеты к необходимым нам координатам. В левой части выберите Move, а в правой части — необходимый виджет, в моем случае это виджет parallax. Из выпадающего списка выберите значение to, а в поле координат введите значение координаты X вашего верхнего виджета, в моем случае это 145px.

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

А в поле координаты Y ничего не вписывайте, нажмите на иконку функции fx справа от поля ввода. И выберите [[Window.scrollY]] в стеке Window.

Посмотрите координату Y вашего виджета и впишите ее перед значением [[Window.scrollY]], должно получится вот так: [[55-Window.scrollY]].

Если прибавить 55 к значению [[Window.scrollY]], [[Window.scrollY+55]], то при скроллинге виджет всегда будет оставаться на одном месте, так как каждый раз к нему будет прибавляться проскролленное расстояние.

И, наоборот, если ввести значение [[55-Window.scrollY]], то координата Y будет уменьшаться на проскролленное расстояние. И виджет относительно фона будет двигаться в два раза быстрее. Если вы хотите, чтобы виджет двигался медленнее относительно фона, то можно разделить значение [[55-Window.scrollY]], к примеру, на 15 — [[55-Window.scrollY/15]]

После экспериментов верните значение [[Window.scrollY]] в нужное нам [[55-Window.scrollY]].

И по аналогии сделайте то же самое с остальными виджетами. Покажем все действия еще раз на примере первого виджета.

Меняя значения элементов и экспериментируя с параметрами и координатами, можно добиться отличных результатов. Итоговый вариант: