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

js·2022년 4월 5일

핀테크 프론트엔드 과정

목록 보기

4/6

완성본

Demo

1. 로고 가운데 정렬

height값을 부여하고 top과 bottom을 0을 주고, margin: auto로 세로축 중앙에 정렬하게 한다.

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

2. submenu 빗금

li::before의 width를 1px로 주어서 처리. li:first-child::before의 display: none 첫번째 빗금 없애기.

3. 검색 버튼

js로 동적으로 placeholder값을 변경한다. blur시 search icon은 opacity:0으로 사라지게 한다.

깃허브

4. 드롭다운

1을 hover하면 2가 display: block으로 나타나는 구조.

<li class="item">
	<div class="item__name">1</div>
	<div class="item__contents">2</div>
</li>

.item .item__contents {
  width: 100%;
  position: fixed;
  left: 0;
  display: none;
}
.item:hover .item__contents {
  display: block;
}

5. 배지

lodash, gsap 라이브러리 사용.

일정 부분만큼 스크롤이 진행된 경우, 배지의 opacity 및 display를 동적으로 변경.

_.throttle(콜백함수, 지정할 시간)

_.throttle()는 지정한 시간 간격으로 콜백함수를 실행한다.

window.scrollY의 지나친 감지를 방지하기 위해서 사용 하였다.

Visual (메인 이미지)

1. 커피 FadeIn 효과

animation-delay도 delay옵션으로 설정 할 수 있다.

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

Notice

공지사항 슬라이드

swiper 라이브러리 사용. 수직 슬라이드.

스타벅스 프로모션 버튼

버튼 누르면 toggle. height 동적 변경. transition.

프로모션 슬라이드 레이아웃

전체 width: 사진별 width(819px) * 3 + 10px(사진 사이간격) * 2

left: 50%;

margin-left: 전체 width / -2;

/* 위와 같이 하면 가로축 가운데 정렬. */

리워드 버튼 레이아웃

버튼 그룹에 flex-wrap: wrap을 줘서 버튼 그룹의 width가 초과되면 flex item을 다음 줄로 넘기고 마지막 flex item에 flex:1을 줘서 공간을 최대한 차지하게 만든다.

YOUTUBE

유튜브 레이아웃

.youtubearea: youtube 구역, .youtubecover: 격자 무늬 bg, .inner: 떠다니는 이미지 이너 구역

before 선택자로 16:9 비율의 크기를 만들고, 정렬 역시 margin 으로 16:9를 유지시켜주는게 point.

html 깃허브

css 깃허브

iframe Api

내장 플레이어에는 200x200픽셀 이상의 표시 영역이 있어야 합니다.
onYouTubeIframeAPIReady()를 구현 해야 한다.

youtube 공식문서
youtube.js 깃허브

둥둥 떠다니는 애니메이션

gsap.to()로 애니메이션 처리. 자연스러운 효과를 위해 ease옵션을 사용.

ease 옵션값 모음

깃허브

SEASON PRODUCT, RESERVE COFFEE, PICK YOUR FAVORITE, RESERVE STORE, FIND THE STORE

공통 애니메이션 (좌우에서 샤샤샥 나타나는 효과)

스크롤 인터랙션 라이브러리인 ScrollMagic을 사용.

.scroll-spy로 감시구역을 설정하고 그 구역에 도달하면(?) .show가 추가되도록 설정함.

이를 이용하여 해당 구역에 도달하면 애니메이션이 실행되도록 설정.

.show를 이용하여 미리 설정해둔 애니메이션(엄밀히 말하면 transform)을 toggle.

js 깃허브

뒤집기 애니메이션

앞뒤면 모두 :hover 시 transform: rotateY()로 Y축방향 회전을 시켜주고

backface-visibility: hidden; 뒷면은 안보이게 하고 perspective 3d효과를 내기 위해 원근감을 준다.

html 깃허브

css 깃허브

AWARDS

슬라이드 레이아웃

왼쪽,오른쪽 버튼 position: absolute; top:0; bottom:0; margin: auto;로 세로방향 가운데 정렬 후 각각 left: -100px, right: -100px

submenu 빗금과 마찬가지로 before 선택자로 점 그리고 li:last-child::before 마지막 before는 display: none 처리.

띄어쓰기 처리

margin-right: 15px 주고 :last-child에만 margin-right: 0 처리.