스타벅스 클론(4) - 헤더와 드롭다운 메뉴(2)

코딩사랑꾼 2023. 8. 9. 02:37

배지부분을 자세히 보시면 두 덩어리로 나눠져 있으며

일정 영역까지 스크롤하면 없어집니다.

배지 html부분은 간단해서 설명 생략하겠습니다.

css부분을 살펴보겠습니다.

.badges는 배치하려고 하니 부모요소인 header에도 position값을 넣어야하는 점 잊지마세요.

보통 relative값을 주는데 이번에는 fixed를 넣었습니다.

스크롤이 생겨도 header부분이 계속 보여야하기 때문입니다.

여기서 주의할 점, width 속성 추가입니다.

position속성에 relative, fixed 값이 지정되면 해당 요소가 너비를 최소한을 사용하는 경향이 있습니다.

즉, 뷰포트를 축소/확대하면 해당 요소가 화면 전체를 차지지 않습니다.

이미지 모서리가 둥글게 나오니까 border-radius를 추가했고,

이미지가 border를 넘치지 않은 overflow속성도 추가했습니다.

box-shadow는 배지 박스 그림자를 만드는 속성입니다. 총 4개 값을 지정해줘야 합니다.

각각 x축에서 떨어진 거리, y축에서 떨어진 거리, blur(모호도), 색상;

앞에 두 값을 다 이해할 거라고 생각합니다.

blur(모호도)는 얼마나 번지는 거를 지정해주는 값입니다. 숫치가 클 수록 더 많이 번짐.

이제부터 스크롤하면 배지가 살아지는 것을 작업하겠습니다.

여기서 2개의 라이브러리를 사용할 예정입니다.

1. lodash 라이브러리 - 참조

2. gsap 라이브러리 - 참조

js 파일을 살펴보면 document와 window가 보입니다.

document는 html파일을 지칭하며, window는 브라우저 창으로 생각하면 됩니다.

scroll 이벤트 발생되니까 lodash 라이브러리의 _.throttle 메소드를 사용했습니다.

그 중에서도 gsap라이브러리를 사용했고요.

gsap.to() 메소드 옵션에 opacity는 시각적으로 완전 투명이 되는 겁니다.

시각적으로 안 보이지만 해당 위치에 배지는 여전히 남아 있습니다.

기타 버튼 혹은 영역의 이벤트에 방해되지 않게 display속성도 넣었습니다.