css - animation-timeline( scroll 양을 알려주는 상단바 )

이번에 새로 만들어진 animation효과이다! scoll내리면 나오는 효과 주고 싶어서 gsap랑 이것 저것 찾아보던 중 

animation-timeline을 발견했다! 너무너무 간편하게 사용할 수 있다!

 

📌animation-timeline : scroll()

animation-timeline:scroll(root block);

 

() 안에는 기준이 되는 스크롤바를 적어주면 된다. 

 

오른쪽 

nearest -> 가장 가까운 부모 

self -> 나 자신 

root -> viewpoint 

왼쪽 

block - 세로

inline - 가로

 

 

📌animation-timeline : view()

animation-timeline:view(root block);

 

view()는 브라우저 전체 기준이 아닌 현재 보여지는 화면이 기준이 된다. 

스크롤바에 따라 이미지의 폭을 달리하는 코드

 

 

 

응용해서 만든  scroll 양을 알려주는 상단바

 

HTML

<div className="scroll_top"></div>

 

CSS

.scroll_top {
  z-index: 999;
  background-color: #ffa47d;
  position: fixed;
  transform-origin: 0 50%;
  width: 100vw;
  height: 0.5em;
  animation: grow auto linear both;
  animation-timeline: scroll(root block);
}

@-webkit-keyframes grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1)
  }
}


@keyframes grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1)
  }

}

 

 

 

 

참고자료 

• https://youtu.be/95YLHDzsg8A?feature=shared