스타벅스 클론(12) - 스트롤 위치 계산 애니메이션

위에 gif에서 스크롤이 내려오면 애니메이션 효과를 나타납니다.

이번 글은 이 효과를 만들어보겠습니다.

 

html은 간단해서 별도 설명 안 하겠습니다.

배치를 했습니다.

.picture은 동글게 나와야 되서 border-radius에 50%값을 주면 해당 효과가 나옵니다.

더 자연스럽게 그림자 효과도 box-shadow로 추가했습니다.

 

js파일에서는 scrollMagic 라이브러리를 사용해봤습니다.

 

section.scroll-spy 값이 있는 요소들을 모두 찾아서 spyEls에 할당합니다.

forEach메소드를 사용해서 각각의 요소를 반복하게 함수를 실행될 겁니다.

ScrollMagic뒤에 체이닝방식으로 메소드들을 연결합니다.

 

.Scene() 메소드는 특정한 요소를 감시하는 옵션을 지정해줍니다.

triggerElement 속성은 감시한 요소를 지정하고,

triggerHook 속성은 뷰포트의 어느 위치에 도달한지 감시하는 겁니다.

뷰포트 위에는 0, 하단에는 1인 값입니다.

 

.setClassToggler() 메소드는 어떤 클래스를 넣었다 뺐다 할 수 있습니다.

즉, spyEl 요소에 show 클래스를 넣었다 뺐다 할 겁니다.

 

.addTo() 메소드는 scrollMagic 라이브러리가 필요한 컨트롤러입니다.

 

지금 보시는 부분은 css파일입니다.

원하는 효과 중 요소들이 왼쪽 혹은 오른쪽에서 날라오는 효과가 있었습니다.

translateX() 를 사용해서 해당 효과를 만들었고,

좀 더 자연스럽게 나타나는 과를 위해 지연속도도 넣었습니다.

 

그리고 다시 html파일에 들어가서 위에 이동 및 지연 효과의 클래스를 넣어줍니다.

기타부분도 해당 클래스들 추가해야 되는데

캡처 생략하겠습니다.