【CSS】CSSだけでスクロールに合わせたアニメーションがつくるscroll-driven animationsを触ってみた。

## はじめに
みなさんは、**scroll-driven animations**を知ってますか？

scroll-driven animationsは、Chrome 115でCSSだけで、スクロールに合わせたアニメーションが作れるようになるものです。

今までは、JavaScriptなどを駆使してスクロールアニメーションを作っていましたが、これから、CSSだけで、簡単に作れるようになるようです。

この記事では、そんなスクロールアニメーションでsampleを作ってみたので紹介します。

https://developer.chrome.com/articles/scroll-driven-animations/

## Sample
### シンプルな例 1
ページ全体のスクロール量に合わせて、`<div>`のスケールを変えている

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="PoxaExa" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/PoxaExa">
  CSS Anchor Positioning - sample 02</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<br>

### シンプルな例 2
アニメーションする要素が画面に入ったらアニメーションスタートし、画面内の要素位置によってスケールを変えている

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="MWzXQwa" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/MWzXQwa">
  Scroll Driven Animations - sample 01</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<br>

### 要素をふわっと表示させる例
要素が画面内に入ったら、ふわっと表示される例

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="eYQKVBd" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/eYQKVBd">
  Scroll Driven Animations - sample 02</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<br>

### Headerがいい感じに登場する例
イケイケなサイトによくある、少しスクロールしたら表示されるHeaderの例

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="MWzXQQb" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/MWzXQQb">
  Scroll Driven Animations - sample 04</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

<br>

### 画像をいい感じにアニメーションさせる例
画像が画面上部で固定されながら、画像サイズが変わっていくようなアニメーションの例
`position: sticky;`といい感じに組み合わせて、作成しました。

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="PoxaQyM" data-editable="true" data-user="sp_degu" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/PoxaQyM">
  Scroll Driven Animations - sample 04</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## まとめ
この記事では、chrome115から使えるようになった、scroll-driven animationsについて触ってみた時のサンプルを紹介しました。

scroll-driven animationsを使えば、単純なスクロールアニメーションは、サクッと作れそうです。

細かなscroll-driven animations　の仕様や使い方は別の記事でまとめようと思います。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510