[CSS] 2022 Trend @scroll-timeline

스크롤 타임라인이란?

AnimationTimeline은 시간 값인 분, 초가 아닌 크롤 진행에 따라 결정 되는 것을 정의한다.
속성을 사용해 스크롤 타임라인이 CSS 애니메이션과 연결된다.

@scroll-timeline moveTimeline {
    source: auto;
      orientation: vertical;
      scroll-offsets: 0px, 500px;
}

• source: 스크롤 위치가 타임라인의 진행을 주도하는 스크롤 가능한 요소.
  • auto: 현재 Document 전역 Window 객체와 연결.
  • selector("id-selector"): 요소의 ID로 식별되는 스크롤 컨테이너
  • none: 스크롤 컨테이너가 지정되지 않음
• orientation: 스크롤 타임라인 방향.
  • auto: 기본값(vertical)
  • block: 쓰기 모드 및 방향에 따라 블록 축을 따라 스크롤 위치 사용
  • inline: 쓰기 모드 및 방향에 따라 인라인 축을 따라 스크롤 위치 사용
  • horizontal: 쓰기 모드나 방향 관계없이 가로 스크롤 위치 사용
  • vertical: 쓰기 모드나 방향 관계없이 세로 스크롤 위치 사용
• scroll-offsets: 스크롤 타임라인의 스크롤 오프셋을 결정.
  • none: 스크롤 오프셋을 지정하지 않음
  • <length-percentage>
  • <element-offset>

스크롤 오프셋

1. length-percentage 이용 방법

<length-percentage>의 각 값은 animation-duration과 매핑된다.

• animation-duration: 2s
• scroll-offsets: 0px, 30px, 100px

위의 상황일 경우 1초 후 30px 또 그다음 1초후 100px 이런식.
일반적으로 부드러운 스크롤 애니메이션의 경우 여기에 0px, 100px와 같은 두 가지 값을 사용한다.

2. element-offset 이용 방법

페이지 내에 요소를 지정하고 스크롤 타임라인을 결정하는 위치와 사용할 요소의 가장자리를 지정한다.
Edge는 키워드 start 또는 End로 결정할 수 있다.

@scroll-timeline elemtent-move {
  source: auto;
  origentaion: vertical;
  scroll-offsets: selector(#myElement) start 0, selector(#myElement) end 0;
}

 

참고

- https://developer.mozilla.org/en-US/docs/Web/CSS/@scroll-timeline​