지원이 중단된 브라우저를 사용하고 있습니다.
브라우저 업그레이드를 통해 최적화된 화면을 볼 수 있습니다.

Home scroll watcher
Post
Cancel

scroll watcher

By yeojin
Posted 2024-01-02 Updated 2024-01-26 1 min read

Cross Browsing

animation-timeline

view

css 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.scroll-watcher {
  position: fixed;
  top: 0;
  z-index: 800;
  width: 100%;
  height: 10px;
  background-color: lime;
  scale: 0 1;
  animation: scroll-watcher linear;
  animation-timeline: scroll();
  transform-origin: left;
}

@keyframes scroll-watcher {
  to { scale: 1 1;}
}
css
css
This post is licensed under CC BY 4.0 by the author.
Recently Updated
Contents