[ skrollr | 스크롤 기반 애니메이션 | html ]

[ Html skrollr data-attributes ] 

Absolute vs relative mode

absolute mode (or document mode)

data- [offset] - [anchor]입니다. 

#여기서 offset은 정수 (0은 기본값)

• data-0 = data-start = data-0-start : 스크롤 상단이 0 일 때.

• data-100 = data-100-start : 스크롤 상단이 100 일 때.

• data--100 = data--100-start : 스크롤 상단이 -100 일 때 (써넣은 offset값이 지점에 따라 상대적일 수 있다는 점을 명심!!)

• data-end = data-0-end : 오프셋이 0이지만 맨 위가 아닌 문서의 맨 아래부터 세는 경우. 즉, 페이지 하단에 도달했을 때입니다.

• data-100-end : 100px까지 도달 할 수 있습니다.

• data--100-end : 100px 우리가 바닥에 도달 한 후에도 (다시 말하면 필요에 따라 달라집니다.)

relative mode (or viewport mode)

data- [offset] - [viewport-anchor] - [element-anchor]입니다.  

# 여기서 offset은 정수 (0은 기본값) 

# viewport-anchor (필수) 및 element-anchor (선택 사항)

  (상단, 중앙 또는 하단의 요소 앵커가 생략되면 viewport-anchor의 값이 취해집니다)

• data-top = data-0-top = data-top-top = data-0-top-top : 요소의 상단이 뷰포트의 상단에 정렬 될 때.

• data-100-top = data-100-top-top : 요소의 상단이 뷰포트 상단보다 100px 위에 있는 경우.

• data--100-top = data--100-top-top : 요소의 상단이 뷰포트의 맨 아래 100px 인 경우.

• data-top-bottom = data-0-top-bottom : 요소의 아래쪽이 뷰포트의 맨 위에 있을 때 (단지 보이지 않습니다).

• data-center-center = data-0-center-center : 요소가 뷰포트의 중심에 있을 때.

• data-bottom-center = data-0-bottom-center : 요소의 중심이 뷰포트의 아래쪽에 있으면 요소의 위쪽 절반이 보입니다.

**  data-anchor-target 속성은 css 셀렉터를 허용하며 

     셀렉터와 일치하는 페이지의 요소에서 키 프레임을 트리거하는데 사용됩니다. 

     data-anchor-target은 IE8 이상에서 실행 가능합니다. 

참고 : IE7을 지원해야하는 경우 ID를 앵커 대상, 즉 #foo로만 사용할 수 있습니다. IE 플러그인은 querySelector를 getElementById에 매핑합니다.

See the Pen skroll : data-anchor-target test by seobin (@lullu-lalla) on CodePen.

>> 크게보기 : https://codepen.io/lullu-lalla/full/mpzMGd

** background-position: % %  --> background: % px 은 안되는 것 같다 ㅜ (뚝 끊겨서 이동)