✔ [홈커버] 동일인물 사진 위아래 스와이프 인터랙션
Completed by 정다희
- Assigned to
-
김기범
- Notes
-
📍 경로
- 앱 / 웹 커버홈
📍 As-Is
- 시차인터랙션 적용되어 있음
📍 To-Be
- 인물이 변경되는 것이다 보니 전체 블럭이 밀리는 인터랙션 필요
- 완전히 새 인물이라는 느낌, 등장 자체의 콘텐츠화 필요
기존 인물 카드 전체 위로 밀려나가고 (슬라이드 아웃)
새 인물은 opacity 0 → 1, scale 0.92 → 1.0으로 등장
타이틀/키워드도 translateY(10px) → 0, opacity 0 → 1 (아래에서 위로 부드럽게 올라오며 등장)
이미지 자체에 살짝 zoom-in 부여 (시선 집중 유도)
위의 내용 반영이 어렵다면 슬라이드 아웃 정도로 우선적 적용 부탁드립니다! (상하 스와이프시)
아래처럼 기존 카드는 큼직하게 슬라이드 아웃되고, 새 카드는 부드럽게 올라오면 되는걸까요?
참고로 페이징 인터랙션의 아래 4가지 요소가 있습니다:
- fade in 거리
- fade in 속도
- fade out 거리
- fade out 속도
각 요소별 값마다 예시 첨부드릴게요!
새 인터랙션 시안 참고 부탁드리며, 변경이 필요하실 때는 아래 값을 전달주시면 반영해보겠습니다!
아래에서 위로 스와이프시 슬라이드되는 형태이고, 로고 등 컴포넌트들은 시차를 두고 트랜지션 되는 형태입니다.
alphapeople.kr 로그인이 필요한데 혹시 계정 정보 아실까요?
--> 현재 parallax 효과는 가로 스크롤에 적용되어 있어서, 세로 스크롤에 동시에 적용하기는 구조상 어려움이 있을 듯 합니다!ㅜ
성공한 것 같습니다?!