2021-08-03 (113일차)tailwind 최신기능, rangeFixed, 이미지 스크롤 따라가기(반응형)

 

  FullPage 3강~5강  

  GSAP와 스크롤트리거 17강 ~ 20강  

 

- fullpage 셋팅방법

  - html

  fullpage.min.js 가져오기

  fullpage.css 가져오기

  #fullpage로 전체를 감싸기

  section으로 페이지 구분하고 무조건 section이라는 class 넣어주기

  - javascript

  new fullpage ('#fullpage', {~~~});

 

- fullpage에서 해당링크로 이동하는 방법

  ★  javascript에서 anchor 사용

페이지 순서대로 지정해주기 (1페이지 =yellow라는 색상+section-1이라는 링크주소)

 

※ fullpage에서는 스크롤바가 생기지 않는다. (scrollBar:false가 적용되어있기 때문)

ㄴ scrollBar:true 넣어주기

---

---

  - rangeFixed 활용예제  

  1) 반응형 만들기

     ?px이상에서만 사진과 텍스트가 좌우로 배치 + 텍스트 영역에서만 사진이 스크롤을 따라다니게 하기

     ?px이하에서만 사진과 텍스트가 상하로 배치

html

javascript