Top button - Axure Deep Dive #2

웹페이지가 점차 길어짐에 따라 사용자 편의성을 위해 탑버튼이 꼭 필요해졌습니다.

오늘은 엑슈어를 활용하여 탑버튼을 만들어 보도록 하겠습니다.

 

탑버튼을 구현하기위해서든, 탑버튼에서의 인터랙션과 아무것도 클릭하지 않은 상태에서 스크롤 다운, 업의 인터랫션이 필요합니다.

차근차근 따라오시면 쉽게 구현하실 수 있습니다.

 

Step. 1 

TOP BUTTON을 생성하고, 다이내믹 패널을 설정해준 뒤 이름을 top button 이라 지정해줍니다. top button을 선택 후 숨김 처리 하시고, pin to browser 에서 right, bottom 을 선택하시고, 마진은 원하는 만큼 설정해줍니다.

Step. 2

top button 위젯을 히든 처리하고, 아무것도 클릭하지 않은 상태에서 인터랙션에서 윈도우 스크롤 다운 클릭 후 show/hide 클릭 후 top button show를 선택해줍니다.

 

그런 다음 top button 위젯에 인터랙션을 추가하는데 click or tap 을 선택 후 scroll to widget(anchor link)를 선택 후 타겟 값은 제일 상단의 위젯을 선택해줍니다. 저같은 경우는 top ankor박스를 선택하였습니다. 그런다음 animate에 swing을 선택한 후 done선택을 해줍니다.

 

다음으로 해당 탑버튼은 클릭 시 상단에 배치되었을 때 사라져야 함으로 show/hide를 선택하여 해당 위젯을 hide 시켜줍니다.

 

Step. 3

해결방법으로는, add case를 추가하여 해결할 수 있습니다.

"만일, 윈도우 스크롤 업을 할때 해당 스크롤 값이 0과 동일하다면, 해당 위젯을 사라지게 만들어라" 라고 생각을 하고 공식을 그대로 삽입하면됩니다.

 

1번에 add case 입력 후 2 value 선택, 3번에 3-1번과 같이 [[window.scrollY]] 입력 후 4번에 equals 5번에 value 6번에 0 을 입력하면 위와 같은 문장을 식으로 변환하였습니다.

 

최종 로직은 3-1번 부분을 확인하시면 됩니다. 이후, show/hide를 추가하여 해당 버튼을 hide 해주면 완성됩니다.

프로토타이핑: https://4wxtva.axshare.com

Untitled Document

rp file:

top button.rp

0.06MB