🔔 8일차
어제는 팀원들과의 코드 리뷰 시간에 보여줄 것이 없어서 많이 우울했지만.. ㅠ 오늘은 그만큼 더 열심히해서 보여줄 것이 많았다!
혼자서 랜딩 페이지 part-8까지 구상했는데 오늘 part-5까지 들어갈 애니메이션들을 구현해냈다.
팀원들도 랜딩 페이지 디자인이 좋다고 칭찬해주셔서 더 힘이난다!! 랜딩 페이지는 웹 페이지의 얼굴인 만큼 정말 공을 많이 들 일 필요가 있다고 생각했다.
그래서 더 부담감을 가지고 열심히 해보았다! 랜딩페이지 5일을 목표로 잡고 5일동안 다 구현해내는 것이 목표이다. 지금 속도라면 충분히 가능할 것 같다!
오늘도 밥먹는 시간을 제외하고 아침부터 밤까지 계속 코딩만 정신없이 한 것 같다. 그래도 결과물이 조금씩 보이니 정말 기분이 좋다! 마지막까지 더 화이팅하자!
💪 오늘은 어떻게 프로젝트에 기여했나요?
랜딩페이지 서비스 소개부분에 들어갈 애니메이션을 어떻게 배치할지 생각해보고 구현해냈다.
서비스 소개중에서도 핵심기능인 칸반보드, 캘린더 소개부분은 이런식으로 애니메이션을 넣어보았다.
안에 기능들을 보여줄 부분은 아직 넣지 않았다. 저 부분은 워크스페이스까지 구현을 다 하고 이미지로 넣을지 고민중이다.
그 다음 핵심기능으로 채팅부분을 애니메이션 효과로 소개를 해보았다.
프로필 사진을 넣지 않으면 허전할 것 같아서 일단 무료 아이콘을 다운받아서 보여줬다. 팀원들에게 발표하기 위한 용도로 사용을 했다.
저 아이콘은 실제로 이미지가 많이 흐리게 보이기 때문에 다른 아이콘을 써야할 것 같다.
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
랜딩 페이지 part-2 부분에서 이미지를 스크롤 내려서 part-3까지 끌고 오는 3D 효과를 작업하고 있다.
일정 스크롤 위치에서 나타났다가 일정 스크롤 위치에서 다시 사라지게 해주고 있다. display: none 은 trainsition이 먹지 않아서 당황했다.
그래서 opacity로 다시 도전해보려고 한다. 처음에는 Ref로 이미지에 접근을 해서 시차 라이브러리인 rellax를 사용해서 시간차를 주려고 했는데, 텍스트에서는 잘 되는데 이미지가 잘 안되어서 애먹었다.
결국 이미지는 해답을 찾지 못했고, fixed를 주어서 일정 스크롤에서 opacity효과를 주려고 한다. 생각보다 3D 효과가 내 마음대로 움직이질 않아서 삽질을 정말 많이 하고 있다.
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
랜딩 페이지 Part-6 구현