HTML/CSS/JS로 만드는 스타벅스

1. Header

메인 로고

로고 가운데 정렬

오로지 height, position, margin 값으로만 가운데 정렬. top과 bottom을 0으로 줘서 위아래 붙이고, margin: auto로 자동으로 중앙에 정렬하게 한다.

.logo {
	position: absolute;
    height: 75px; <!-- 반드시 높이값 부여 -->
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
}

검색 버튼

자바스크립트로 동적으로 placeholder값을 부여한다. blur시 검색 icon은 opacity:0으로 사라지게 한다.

배지

lodash, gsap 라이브러리 사용.

일정부분만큼 스크롤이 진행된 경우, opacity 및 display 전환 처리.

2. Visual (커피 이미지 부분)

마찬가지로, gsap으로 fadeIn 처리. animation-delay도 처리한다 ㄷㄷ

	gsap.to(fadeEl, 1, { opacity: 1, delay: (idx+1) * .7)