Scroll Progress Timeline のサンプル

Scroll Progress Timelineは、スクロールできるコンテナー内のスクロール位置によって、アニメーションを指定できるタイムラインである。このサンプルでは特定したコンテナ(ブラウザが表示した全高の色のついた範囲)のスクロールの位置によりプログレスバーを 0% から 100% まで表示する。

Scroll Progress Timeline の基本的な使い方は、アニメーションさせたい要素(ここでは赤い線)の animation-timeline に scroll() 関数を使い、animation に @keyframes を指定する。

animation-range: entry; は、スクロールポートに要素が見える範囲がアニメーション範囲になる。要素がスクロールポートに1px以上入ってから、全要素が見えるようになるまでアニメーションする。

<div class="view">
  <div class="item"></div>　<!-- 赤い色のプログレスバー -->
  <p>
  Scroll Progress Timelineは、…まで表示する。
  </p>
  
  <p>
  Scroll Progress Timeline の…を指定する。
  </p>

  <p>
  <img class="revealing-image" src="images/joe_sample.jpg" alt="" style="margin-top: 1rem;">
  </p>
  <p>
  …
  </p>
</div>

.view {
  font-size: 1rem;
  line-height: 1.3;
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: #333;
  background-color: rgba(176, 196, 222, .2);
}
/* プログレスバー */
.item {
  position: fixed;
  height: .5rem;
  top: 0;
  left: 0;
  background-color: red;
  animation: auto linear change both; /* animation-duration: auto; */
  animation-timeline: scroll();
  animation-range: entry;
}
@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1;  }
}
@keyframes change {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.revealing-image {
  width: 100%;
  height: auto;
  animation: auto linear reveal both; /* both (※注釈 A) */
  animation-timeline: view();
  animation-range: entry 25% cover 50%; /* animation-range: (※注釈 B) */
}

CSS の animation: linear は、アニメーションを一定の速度で実行する値である。その他、ease: 軽く加速をして、終わりで軽く減速する・ease-in: 最初はゆっくりで、だんだん速くなる・ease-in-out: 最初と最後に減速と加速が入る、などがある。

(※注釈 A) CSS の animation プロパティの「both」は、再生前は@keyframes(0%)が、再生後は@keyframes(100%)のスタイルが適用される。

(※注釈 B) CSS の animation-range: は、直訳で「アニメーション範囲」である。