Axure7 또는 8을 이용하여
pin to browser로 특정 위치에 고정시킨 오브젝트를 스크롤에 따라 움직이게 하고 싶을 경우,
아래 이미지를 보면 쉽게 알 것이다.
조금 더 풀어보자면,
해당 페이지 interation에서 OnWindowScroll을 선택한 후 Case Editor를 열어 Move를 선택,
그리고 to를 선택한 후 X와 Y에 다음과 같이 적어주면 된다.
그리고 to를 선택한 후 X와 Y에 다음과 같이 적어주면 된다.
X : [[pin.x]]
Y : [[대상 오브젝트의 높이값-Window.scrollY]]
스크롤Y축 앞에 들어갈 숫자는 대상 오브젝트의 y값을 입력하면 된다.
Y : [[대상 오브젝트의 높이값-Window.scrollY]]
스크롤Y축 앞에 들어갈 숫자는 대상 오브젝트의 y값을 입력하면 된다.
Axure9에서는 인터페이스가 대폭 바뀌어서 interaction 설정하는 것이 꽤나 까다롭다.
특히 Case Editor 자체가 없어져서 처음에는 정말 헤매게 되더라.
특히 Case Editor 자체가 없어져서 처음에는 정말 헤매게 되더라.
해당 페이지의 Interations 탭에서 New Interation 선택,
이후 펼쳐지는 메뉴에서 OnWindowScroll - Move를 차례로 선택,
이후 Target에서 대상 오브젝트(widget)을 선택 한 후에
Move 셀렉트 박스를 to로 바꾸고 X, Y에 동일하게 넣어주면 된다.
이후 펼쳐지는 메뉴에서 OnWindowScroll - Move를 차례로 선택,
이후 Target에서 대상 오브젝트(widget)을 선택 한 후에
Move 셀렉트 박스를 to로 바꾸고 X, Y에 동일하게 넣어주면 된다.
상단 헤드 이미지 밑에 고정시킨 GNB가 있을 경우,
스크롤을 통해 헤드 이미지가 보이고 말고 할 경우엔
다음 파일을 참고해 보자.
OnWindowScroll-StickyHeader.rp