2021-06-25 (74일차) 탭메뉴(data-tb),scrollTrigger, toggleActions, onEnter, onLeave, onEnterBack, and onLeaveBack

자바스크립트 80~81강

GSAP와 스크롤트리거 7강~10강

 

< 탭 메뉴 만들기 >

원리 : 1대1로 그룹을 지어줘야 한다.

data-tb 사용

'클래스이름_ _숫자_ _head' 와 '클래스이름_ _숫자_ _ body'가 연결되는 원리

head 클릭시 연결된 body에 .tb-active가 들어감

평소에는 _ _ body가 들어가는 클래스를 숨겨주다가 클릭이 되며 .tb-active가 들어가면 보여줌

어떤 원리인지는 모르지만 일단 넣어보는 자바스크립ㅌ크..

 

---

 

- scrollTrigger : '대상 '

  : trigger '대상'이 화면에 보이면 동작 실행

 

< 두 가지의 쓰는 방식 >

두 가지의 방법

scrollTrigger에 옵션을 추가하기 위해서는 대괄호를 쓰는 두 번째 방식을 사용해야 한다.

 

---

- markers : true

  : 시야의 시작점과 끝점, trigger의 시작점과 끝점을 표시해주는 기능이다.

 

※ 화면의 가장 상단 부분을 end, 화면의 가장 하단 부분을 start라고 표현

※ 애니메이션 대상의 가장 상단 부분을 start, 애니메이션 대상의 가장 하단 부분을 end라고 표현

 

 

- start : 'n% n%' (px도 사용 가능)

  첫 번째 % : trigger 시작점을 내려줌

  두 번째 % : 스크롤 시작점을 올려줌

 

 

- end : 'n% n%' (px도 사용 가능)

  첫 번째 % : trigger 끝점을 올려줌

  두 번째 % : 스크롤 끝점을 내려줌

 

 

- togglActions : ' '

  : togglActions : 'onEnter onLeave onEnterBack onLeaveBack'

  onEnter :  내려가면서 만났을 때 어떡할 거야?

  onLeave : 내려가면서 지나쳤을 때 어떡할 거야?

  onEnterBack : 올라가면서 만났을 때 어떡할 거야?

  onLeaveBack : 올라가면서 지나쳤을 때 어떡할 거야?

  < Option >

  restart : 재시작할 거야

  pause : 멈출 거야

  resume : 다시 움직일 거야

  reverse : 반대로 돌아갈 거야

 

예시