はじめに
みなさんは、scroll-driven animationsを知ってますか？
scroll-driven animationsは、Chrome 115でCSSだけで、スクロールに合わせたアニメーションが作れるようになるものです。
今までは、JavaScriptなどを駆使してスクロールアニメーションを作っていましたが、これから、CSSだけで、簡単に作れるようになるようです。
この記事では、そんなスクロールアニメーションでsampleを作ってみたので紹介します。
Sample
シンプルな例 1
ページ全体のスクロール量に合わせて、<div>のスケールを変えている
See the Pen CSS Anchor Positioning - sample 02 by でぐぅー | Qiita (@sp_degu) on CodePen.
シンプルな例 2
アニメーションする要素が画面に入ったらアニメーションスタートし、画面内の要素位置によってスケールを変えている
See the Pen Scroll Driven Animations - sample 01 by でぐぅー | Qiita (@sp_degu) on CodePen.
要素をふわっと表示させる例
要素が画面内に入ったら、ふわっと表示される例
See the Pen Scroll Driven Animations - sample 02 by でぐぅー | Qiita (@sp_degu) on CodePen.
Headerがいい感じに登場する例
イケイケなサイトによくある、少しスクロールしたら表示されるHeaderの例
See the Pen Scroll Driven Animations - sample 04 by でぐぅー | Qiita (@sp_degu) on CodePen.
画像をいい感じにアニメーションさせる例
画像が画面上部で固定されながら、画像サイズが変わっていくようなアニメーションの例
position: sticky;といい感じに組み合わせて、作成しました。
See the Pen Scroll Driven Animations - sample 04 by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、chrome115から使えるようになった、scroll-driven animationsについて触ってみた時のサンプルを紹介しました。
scroll-driven animationsを使えば、単純なスクロールアニメーションは、サクッと作れそうです。
細かなscroll-driven animations の仕様や使い方は別の記事でまとめようと思います。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。