Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <ul><li><a>Первая часть руководства</a>. Скролл-эффекты: фиксированное меню и появление всплывающего окна.</li>

2 <li><a>Вторая часть руководства</a>. Эффект параллакса и модальное окно.</li>

3 </ul>Крайне полезный интерактивный элемент. Порой его так не хватает на многих сайтах с бесконечной прокруткой. В этом мини-уроке мы разберем, как сделать этот элемент в Axure.

4 Кнопку "Наверх" можно реализовать с помощьюanchor link(якорная ссылка). Для этого откройте файл, в котором вы делали фиксированное меню. Нарисуйте подвал, добавьте иконку стрелки вверх, конвертируйте подвал в master(правой кнопкой мышиConvert to Master). Вот что получилось у меня:

5 Перейдите в master(двойной клик). Добавьте любой элемент в левый верхний угол, что это будет за элемент - не важно (text, boxи так далее). Он и будет якорной ссылкой. Задайте название, я назвалanchor. Скройте якорную ссылку с помощьючек-бокса Hidden.

6 На стрелку вверх добавьте событиеOnClick. Для этого перейдите на вкладкуProperties, нажмитеOnClick, в открывшемся окне выберите слеваScroll to, а справа якорную ссылкуanchor.

7 Находясь в master footer, снимите выделение со всех элементов, кликнув в пустой области. Перейдите на вкладкуProperties, нажмитеOnPageLoad. В открывшемся окне выберите слеваMove, а справа - нашу якорную ссылкуanchor, ниже выберите из выпадающего списка to и выставьте координаты X Y 0 0. Это необходимо для того, чтобы при загрузке мастера на странице якорная ссылка переместилась в координаты0 0.

8 OnPageLoad.Можно проверять:

9 Да, все работает.Мы рассмотрели один из вариантов создания кнопки "Наверх". Комбинируя полученные знания из руководства (этот урок и урок создания всплывающего окна), можно сделать решение, как у Habrили "Вконтакте" (кнопка появляется при скроллинге вниз на определенное расстояние, по клику на нее возвращает в начало страницы и исчезает).

10 Популярная механика работы блока FAQ - контейнер с ответом разворачивается по клику на соответствующий вопрос. Вы наверняка такое не раз видели.

11 Для начала создайте две динамические панели: первая - это вопрос, вторая - блок ответа. Скройте блок ответа чек-боксомHidden. У меня получилось так:

12 Выделите динамическую панель вопроса (у меня она называетсяquestions) и дважды кликните на ней левой кнопкой мыши, чтобы открылось окно менеджера динамических панелей.

13 Нажмите на строкеState 1, чтобы вызвать вкладку динамической панели и отредактировать содержимое.

14 Следующая задача: сделать так, чтобы по нажатию на вопрос раскрывался и показывался блок ответа. Для этого выделите вопрос в открытой вкладке динамической панели, перейдите во вкладкуProperties, выберите событиеOnClickи в открывшемся окне выберите в колонке слеваToggle Visibility, а в правой колонке - блок ответа. У меня он называетсяAnswer.

15 Выставьте настройки, как на скриншоте. Обязательно поставьте чек-боксPull/Push Widgets - это необходимо для того, чтобы открывающийся блок вопроса не наезжал на следующий за ним вопрос, а сдвигал его вниз.

16 Наглядно:

17 Проверяем, что получилось в итоге.

18 Как видим, при появлении блока ответа следующий за ним вопрос сдвигается ниже.

19 С задачей справились.

20 P. S. Хочу показать, как я сделал замену "+" на "-" при открытии и закрытии блока.

21 Зайдите в динамическую панель вопроса. Продублируйте эту панель, как показано на скриншоте.

22 Правой кнопкой мыши нажмите на State 1, Dublicate State, таким образом вы сформируете панельState 2. Теперь вы можете переходить между этими панелями. Вернитесь к панели State 1 и добавьте "+". Перейдите в панель State 2 и добавьте "-".

23 Перейдите в режим просмотра.

24 Вернитесь к вашему прототипу и отредактируйте состояние динамической панели, как показано в ролике.

25 Еще раз посмотрим, что получилось.

26 Блок ответа появляется, плюс меняется на минус и наоборот. Все отлично.

27 Вы давно и хорошо проектируете интерфейсы, но хотите углубить свои знания и начать делать прототипы на качественно новом уровне? Обратите внимание на курс<a>"UX-дизайн 2.0"</a>от Skillbox. Из этого курса вы узнаете, как проводить исследования аудитории, воркшопы для клиента, а также научитесь составлять Customer Journey Maps и многое другое.