🔔 23일차
오늘은 오랜만에 다시 랜딩페이지로 돌아왔다. 웹페이지의 핵심기능인 워크스페이스 부분을 설명하기 위해서 워크스페이스를 먼저 구현하기로 했었다.
지금은 워크스페이스를 다 구현했기 때문에 이제 워크스페이스 기능들을 랜딩페이지에 설명할 예정이다!!
오늘은 랜딩페이지에 새로 애니메이션을 추가하기 위해 keyframes을 공부하고 바로 적용시켜 보았다.
mdn과 구글링을 통해서 금방 구현을 해냈다. 생각보다 어렵진 않았지만 CSS가 처음부터 마음대로 되지 않는건 항상 똑같았다..
💪 오늘은 어떻게 프로젝트에 기여했나요?
짠!!! 이건 오늘 구현한 기능이다. 스크롤에 맞춰서 애니메이션이 하나하나 작동할 수 있도록 구현하였다.
별 거 아닌 것 처럼 보이지만…. 정말 오래걸렸다..ㅜㅜㅜ 다행히도 팀원분들 모두가 마음에 들어하셨다!!! 하하핫!…
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
화살표 이미지를 구현하는데 keframes가 한 박자 늦게 작동되었다. client view안에 들어오면 애니메이션이 작동해야되는데, 화살표가 한 번 깜빡거리고 애니메이션이 작동했다.
스크롤 위치를 계산해서 정해놓은 스크롤 위치에서 display나 opacity로 나타내게 해주었지만.. 무용지물이였다.
이 부분에서 정말 삽질을 많이 한 것 같다. 그래서 일정 위치에서 애니메이션이 실행되게 구현하였다.
그런데 스크롤을 빨리 내릴 경우… 문제가 생긴다.. 유저가 스크롤을 빨리 안내릴 거라는 보장도 없듯이.. 그래서 아직 마무리를 짓지 못했다..ㅠㅠ
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
랜딩 페이지 애니메이션, 문구 등등 마무리!! , 채팅 한 번 더 점검!!