스타벅스 클론(5) - 순차적 애니메이션

위 gif보시면 배경 이미지에 요소들이 하나씩 순차적으로 나타납니다.

 

각 요소를 html에 넣어줍니다.

 

 전역 버튼 스타일

위 html에서도 보이다시피 "자세히 보기"의 클래스는 btn입니다. 즉, 버튼의 약자이고요.

본 프젝 중 btn 클래스를 많이 사용될 것이며 미리 다 css를 지정해 놓겠습니다.

css에서 다 지정해 놓고 다시 html파일로 돌아가 "자세히 보기" 요소 클래스에 btn--brown을 추가하겠습니다.

(이미지는 생략하겠습니다.)

 

visual 부분의 css 파일입니다.

주로 위치를 지정한 것입니다.

 

여기서 주의할 게 있습니다.

.visual의 margin-top이 120px를 부여했습니다. 이게 header부분이 120px이기때문입니다.

이래야 visual가 header때문에 가려지지 않으니까요.

 

.visual .inner은 최상단 inner의 속성을 모두 이어받을 겁니다.

 

또한 옆에 header혹은 배지부분의 쌓임 순서를 확인해야 합니다.

이미지를 따로 캡처 안 했지만 header부분에 z-index값을 부여했습니다.

 

순차적으로 요소 보이기

 

애니메이션을 추가하기위해 html파일을 다시 손 봤습니다.

cup1의 image와 text는 한 묶음으로 같이 나타나니까, div로 감싸줬습니다.

cup2도 마찬가지며, spoon도 그렇습니다.

 

그리고 각 div에다 fade-in클래스를 추가했습니다.

 

fade-in클래스에다 우선 투명 속성을 넣어줍니다.

 

js코드를 통해 요소들을 제어하고 애니메이션 효과를 넣겠습니다.

 

모든 .fade-in클래스를 보유한 요소들을 다 찾아서 하나씩(forEach) 동작하겠습니다.

여기서도 gsap 라이브러리 사용할 겁니다.

gsap.to(요소, 지속시간, 옵션)

위 사용법을 참고해서 fadeEl요소에 1초의 지속시간에서 아래 옵션을 실행하겠습니다.

delay는 지연시간입니다. 여기서는 일일히 계산하기 힘드니까, index값을 사용했습니다.

index는 0부터 시작하며, 첫 요소부터 지연이 있는 동작을 원해서 index + 1를 했습니다.

(index + 1) * .7  --> 즉, 순서마다 0.7s지연해서 효과를 나타나겠다는 뜻입니다.

어떤 효과를 낼 것이냐? 기존에 이미 다 투명으로 만들었으니 당연히 나타나게 해야죠.

그래서 opacity에 1값을 넣었습니다.