CSSの追加機能で、スクロール量に応じてアニメーションを発生させることができるようなので備忘録です。

CSSでアニメーションをする際に使っていた keyframes が時間の経過ではなく、スクロールに応じて連動する感じです。

scale関数を使ってサンプルを作ってみます。

keyframesで始点と終点をセットしscale関数でサイズを変更しています。

実装

.anim_element {
      animation: grow-progress linear;
      animation-timeline: scroll();
}
/* スクロールして表示サイズ変更 */
@keyframes grow-progress {
  from {
    scale: 1 0;
  }
  to {
    scale: 1 2;
  }
}

サンプル

今回はscale関数を使いましたが、opacityを使えばフェードエフェクトに、transformを使えば移動や変形に、background-positionを使えばパララックス効果に使えますね。