기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (2)

📌  이전 내용

2022.02.26 - [Dev-diary/일상] - 기능추가 : 4주차 플젝 메인페이지 애니메이션 구현

기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (1)

 

•  Bare-minimum Requirements

✔ 스크롤 이벤트 : up & down 에 따라 위치 이동
✔ 텍스트, 컴포넌트 transition 애니메이션 추가
✔ 사용자 후기 볼 수 있는 < , > 버튼 구현
✔ 체험하기 버튼, Footer 디자인

 

•  Advanced Requirements

✔ 백그라운드 동적 애니메이션 ? (현재는 어떻게 구현하는 지 감이 안옴)

 

 

📌 텍스트, 컴포넌트 transition 애니메이션 추가

 

💾  중간 과정 렌더링

깔끔하고 그럴싸 해보이는 듯 ...? (내 눈에만 그럴지도)

이번에 구현하면서 배운 CSS 속성들 : animation, @keyframes, translateY(X)( ), transform

아직 완벽하진 않다 🤔 모바일 크기로 설정하면 flex가 예쁘게 (?) 적용되지 않는다 ㅠ.ㅠ

 

난 분명 100vh 로 맞춰놨는데 왜 짤릴까 ?

컴포넌트 크기도 임의로 500px로 맞춰놓고 그 안에서 position으로 위치를 조정했는데 ..

(flex 사용했을 때 정상동작하도록)

1. 어떻게든 100vh 안에 모든 내용이 담기도록 조정한다.
2. 태블릿 & 모바일 크기로 웹뷰가 변하면 scroll event 를 끈다.

 

둘 중 하나의 방법으로 문제를 해결한 후 구현을 마칠 것 같다 !-!