11.헤더와 드롭다운 메뉴-전역 배지(GSAP)(1)

#학습목표 스타벅스 뱃지 만들기

먼저 html코드를 작성 해 줍니다. html코딩은 아주 간단합니다. 그리고 기본적인 css코딩을 짭니다.

배지를 위한 html코딩

CSS코딩을 작성합니다. 모서리도 깎아주고 이미지가 넘치는 것도 막아주고 외부여백 12픽셀로 서로 이미지 간격 띄워주고 그림자도 넣어주고요, 마지막으로 마우스 커서도 만들어 주고요.

 

#body선택자에 height에 3000픽셀로 높이값을 넣어줍니다. 

 

#header 부분에 position 값을 넣을건데, 잠깐 relative를 주석 처리하고 fixed로 값을 넣어줍니다.

그리고 top을 기준으로 작성 해 주고요.

이제 화면을 늘렸을 때 헤더가 정상적으로 출력이 안 되어요.  왜냐하면

뷰포트를 기준으로 배치되는 것이기 때문에,

헤더라는 요소의 가로너비는 auto고, 이 auto를 통해서 브라우저가 자동으로 계산하면서 요소의 너비를 최대한으로 많이 사용하려고 하지 못하고, 저 이미지처럼 가로너비를 최소한으로 사용하려고 시도를 해요.

우리가 알고 있는 최대한이 아니고, 최소한으로 개념이 바뀌는 겁니다. 

 

이;러한 현상은 포지션 fixed와 포지션 absolute에서 발생을 하게 되겠고요. 일반적으로 블럭요소는 가로너비가 최대한 늘어나려고 시도를 하지만, 포지션값이 fixed와 포지션 absolute로 부여된 요소는 가로너비가 최소한으로 줄어드려고 시도를 하더라 라고 기억하세요!!

 

#어떻게?

가로너비 width: auto에서 

width: 100%로 바꿉니다. "가로너비를 100% 사용하겠습니다"를 넣어서 해결..

 

#우리가 position: relative;값을 추가했던 이유는 Badges라는 요소를 위치상의 부모요소로서 기준이 될 수 있도록 값을 넣은건데, 필요에 따라서 position: fixed;를 넣었기 떄문에 이제 relative는 필요없어지고, 대신에 fixed를 넣었기 때문에, 위치상의 부모요소로서 기준이 충분히 될 수 있는 상태가 되었습니다. 

 

#.스크롤을 아래로 내렸을 때, 배지를 사라지게 만들기

#.javascript를 이용해서 코드를 작성.

 

일단 javascript코드 작성을 합니다. 

쿼리셀렉터로 badges를 찾아줍니다. 그리고

 

#window의 의미: 프로젝트가 나타나있는 그 브라우저의 하나의 탭을 의미합니다. 말그대로 브라우저의 창이라고 이해하면 됩니다. 윈도우 객체라고 합니다. 

 

scroll이 일어나면 scroll! 이라는 문자 콘솔창에 문자출력합니다. 

scroll이 일어나면 scroll! 이라는 문자를 콘솔창에 문자출력합니다.

저렇게 프로젝트의 스크롤 개수가 늘어나면 스크롤할 때 많은 함수를 실행하게 되는 것을 말합니다.  그만큼 프로젝트가 무거워짐을 의미하는데,  그렇게 되면 부담스러울 수 밖에 없는게 화면이 버벅거리는 현상으로 나타날 수 있거든요.

 

#.로데쉬 링크 가져오기 (스크롤 할 때 실행되는 함수 제어)

이렇게 화면을 맨 꼭대기에서 맨밑으로 스크롤을 할 때마다 수십개의 함수가 동시에 실행이 되니까, 그 실행되는 함수의 수를 외부에서 가지고 올 수 있는 자바스크립트 라이브러리 를 통해서 제어를 할거에요.

lodash cdn을 검색해서 로데쉬 위에 있는 링크를 들어 가세요. 아래 로데쉬는 로데쉬 사용법이 나와있으니까 보세요.

저거를 복사해서

저기다가 붙이세요.

 

#. 스크롤 할 때 실행되는 함수 제어 

저 부분이 스크롤 될 때마다 많은 함수가 실행되는 부분입니다, 저거를 잘라서.

_.throttle()이라는 함수를 넣어 주세요.

우리가 이미 설치한 로데쉬라는 자바스크립트 라이브러리를 통해서, 저런 명령을 쓸 수 있게 스크립트태그를 연결함으로 해서 이미 등록이 된거고요,  저 " _.throttle(  붙여넣기!!!  ) "의 함수 사이에 function() { console.log('scroll!')};을 붙여주세요.

 

그리고 300 을 입력합니다

 

#300의 의미

 

정확하게는 0.3초를 의미 단위는 밀리세컨드. 1000밀리세컨드는 1초, 

 여기서 얘기하는 0.3초는 무엇을 의미하냐면,

결국에는 화면을 스크롤하면 함수가 수십개가 한번에 실행이 되는데,  그것을 0.3초 단위로 부하를 줘서 함수가 우루루 실행이 되는 것을 방지하는 용도로 " _.throttle(   ) " 이라는 로데쉬에서 제공하는 특정한 기능을 도입한 겁니다. 

스크롤 할 때마다 아까보다 비교적 적은 수의 함수가 실행.

실행되는 함수의 개수를 일정시간에 한번씩만 실행이 되도록 제어를 한 것.

" _.throttle(   ) " 은 많이 사용됩니다. 스크롤 하는 작업이 많은 경우.

 

#. 스크롤 해서 배지를 사라지게 하려면 

다음과 같은 코드로 마무리를 해 줍니다.

if조건문을 이용해서 window, scrollY를 넣는데 이게 뭐냐면, 우리가 scroll할 때마다 Y 값이 그 때 그때 갱신이 되는데, 그 때 Y값입니다.   이 값을 통해서 몇픽셀에 있는지 화면이 어디있는지 확인 할 수 있고요.

저렇게 y값이 나옵니다.

이것을 이용해서 Y값이 500을 넘어가면 사라지게 할거다. 라고

CSS코드를 넣습니다. 사실 CSS로도 할 수 있거든요.

badgeEl이라는 변수는 하나의 요소이고, 그 요소에는 우리가 html의 전역속성을 사용하듯이 style이라는 속성을 사용할 수 있습니다. css속성display를 사용해서 사라지고 나타나게 할 수 있습니다. 

 

#. 자연스러운 효과를 위한 애니메이션 추가 (자바스크립트)

gsap cdn을 검색해서 이번에도 라이브러리로 가 줍니다.

로데쉬와 같은 방식으로 복사&붙여넣기 하면됩니다.

이렇게 코드를 짭니다.

gsap.to(); to라는 기능을 사용합니다. 어떤 요소를 얼마동안 옵션을 추가할 껀데 옵션은 객체데이터를 사용합니다. 

 

그런데 한가지 문제점이 있는데요. 

배지는 클릭을 할 수 있기 때문에 화면에 안 보이는 것이지, 사라진 것은 아닙니다. 스크롤을 내리면 배지가 없어지면서 클릭하는 기능도 사라져야 하는데요, 클릭하는 커서는 안 사라지죠?

그 문제를 해결하기 위해서 display: 'none'과 display: 'block'를 입력합니다.

주의 none이라는 것은 css값이니까 꼭 '문자데이터'니까 따옴표를  넣어주세요.

숫자는 안 해도 되고요. 따옴표 잊지말고요.

display 속성처럼 값이 숫자가 아닌 속성은 전/후 상태의 중간값이 존재하지 않기 때문에, 자연스러운 전환효과를 적용 할 수 없습니다.

이렇게 추가를 해 준다.

정리를 해 보면 gsap이라는 자바스크립트의 애니매이션을 처리 해 주는 라이브러리가 있고,

그 라이브러리에서는 to라는 메소드를 통해서 요소와 애니매이션 지속시간 어옵션을 적용할건지 대한 명시를 하는데 css의 속성을 입력 할 수 있고요. 

이렇게 해서 배지가 기능적으로도 사라질 수 있도록 구현 하였습니다.