26. 고정 배경 만들기

season-product 클래스

얘를 정상위치로 옮기어 주기 위해 다음 섹션으로 옮기어 주자.

이렇게 top에서 -200px 위치로 옮기어 주면 정상적인 위치로 움직인 것을 확인할 수 있다.

뭔가가들어간거 같은데 화면에는 보이지 않는다.

화면에 있는 이미지가 background-attachment:fixed로 인하여 고정되어져 있다.

background-size:cover을 이용해서 배경의 이미지를 요소의 더 넓은 너비에 맞추어준다. 이는 패럴렉스라는 시간차 이미지이다.

27. 3D 애니메이션

background-attachment:fixed를 통해서 viewport를 기준으로 고정되어서 요소가 스크롤되어도 움직이지 않게해준다. 배경의 크기를 더 넓은 크기에 맞추어 주는 background-size: cover를 사용해준다.

실재 완성본은 위와 같이 동그라미 이미지가 회전하는 것을 확인할 수 있다. 바로 이부분이 3D 애니메이션으로 제작된것이다.

backface-visibility:hidden을 사용해서 이미지가 뒤집어 졌을때 이미지가 안보일 것이다.

마지막으로 front, back에 있던 position:absolute가 있고 없고의 차이가 크지 않을 거 같기 때문에 하나에 모아주었다.

28. 휠을 내리면 애니메이션

위와 같이 필요한 내용들을 모두 입력해주자.

관련된 모든 태그들을 작성해주었다.

texture가 중앙으로 갔다.

공통요소는 picture에만 넣었다.

마지막으로 글자요소의 위치를 정의해주었다.

scrollmagic cdn이라고 검색해주었다.

scrollmagic을 추가해주었다.

ScollMagic Scene의 객체중에서 triggerHook: .8이라고 작성한 부분이 있다. 이 부분은 현재의 화면을 0부터 시작해서 1까지 나누고 그 화면중 .8위치를 이야기 한다.

대충 이런식으로 화면을 보고 있다고 생각하면 된다.

29

이제 scroll-spy라는 클래스를 추가해주자

reserve-store 클래스를 제외하고 season-product부터 scroll-spy를 넣어주었다.

그러면 위와 같이 show라는 클래스가 추가된 것을 확인할 수 있다.

btn 관련 속성들이 끝나는 지점에 back-to-position 클래스들을 작성해주자.

season-product에서 위의 클래스들을 추가해주자.

그런데 왜 우리는 more이라는 클래스를 일부러 사용하지도 않는 btn에 추가해주었을까? 이건 btn자체가 transition 값을 원래 가지고 있기 때문에 이를 back-to-position의 transition값으로 맞추기 위한 뒷작업이다.

reserve coffee부분에도 위와 같이 작성해주자.

pick your favorite 부분을 위와 같이 작성해주자.

마지막 find the store 부분도 위와 같이 채워주자

그런데 지금은 이미지가 조금 동시에 동작을 하니 심심하다 그래서 약간의 딜레이를 주자.

위와 같이 delay-n번을 추가해 주어서 딜레이를 줄 수 있도록 준비해 놓자.

이런식으로 back-to-position이 존재하는 부분에는 0,1,2 순서로 delay를 넣어주면 된다.

find the store만 조금 다르게 넣어준다.

30.

다중의 이미지들을 슬라이딩 할 수 있는 구조를 만들어보자

먼저 awards 클래스 내부에 swiper-container가 가지고 있는 성분들을 모두 넣어주자.

일단 넣기는 했는데 정말 아무것도 없다.

31. 푸터

또 가장 하단에 위와 같이 작성해주자. 이때 아래쪽에 copyright것이 존재하는데 이건 html의 특수기호이다.

이러한 특수기호들을 더 확인하기 위해서는
html entities를 검색해보자

https://dev.w3.org/html5/html-author/charref

그리고 © 뒤에는 위와 같이 작성해주고 스타벅스 글자만 적히어 있는 이미지도 삽입해주자.

위와 같이 예쁘지 않게 만들어진것을 확인할 수 있다.

이제 사이사이 점과 파란색을 없애보자

하지만 인라인 요소(a, img, span, srong, input, textarea, select)는 정상적으로 패딩과 마진을 사용할 수 없기 때문에 블록요소로 바꾸어주어야 한다.

그리고 개인정보처리방침을 green 클래스를 추가해주자.

크기를 먹여주려고 display를 block으로 바꾸어 주려고 하는데 이미 position이 absolute이다. 앞에서 position absolute와 fixed는 block요소임을 배웠기에 수정해줄 필요가 없다.

그리고 부모요소에는 꼭 relative를 넣어주자. 마지막 자식은 점이 필요없기 때문에 보이지 않게 만들어주자.

가로세로를 auto를 하기위해서는 원래 width를 주어야 하는데 이번에는 없어도 된다. 왜냐하면 logo가 이미지이기 때문에 margin auto를 자동으로 계산해준다.

마지막으로 body 부분의 높이를 지워주자.

진짜 마지막으로 년도가 자동으로 바뀌도록 js 코드를 짜주자.

32. 최상단 이동 버튼

버튼이 원하는 위치에 생기었다.

gsap cdn을 검색해보자

ScrollToPlugin 기능을 복사해오자

플러그인을 추가해주었다.

gsap은 그냥 태그나 id를 넣어주어도 알아서 찾아준다.

최상단 이동시 버튼이 없어진다.

이렇게 짜주면 대충 작동한다

그런데 이걸 조금 더 효율적으로 사용할 수 있도록 코드를 다시 짜주자

이런식으로 짜주면 된다.