【CSS】スクロールアニメーションを実装

こんにちは、今回はCSSでスクロールアニメーションを実装する方法を紹介したいと思います。

従来はjavascriptで実装していたスクロールアニメーションですが、そろそろCSSだけでいけたりしないのかな？と思い調べてみたらどうやらいけるみたいです。

使用するのは「scroll-behavior」と「scroll-padding-top」の2つのプロパティになります。

「scroll-behavior」ではスクロールのアニメーションを設定し、「scroll-padding-top」でスクロールした後の位置の調整ができます。

まずは両方の対応ブラウザを見てみましょう。

→Can I use…（scroll-behavior）

→Can I use…（scroll-padding-top）

どちらもほぼどのブラウザでも使用できそうです。IEはもうサポートも終わっているので気にしなくていいでしょう。

簡単に作成してみたDEMOは以下になります。

→DEMO

簡素なアニメーションですが、あるのと無いのでは大分変わりますよね。

設定しているCSS部分は以下のような感じとなっております。

「scroll-behavior」を「smooth」と設定することでスクロールでアニメーションするようになります。開発者向けドキュメントなども読みましたが他にアニメーションの種類などはなさそうです。

「scroll-padding-top」は何の為に使用するんだろう？と思う方もいるかもしれませんが、固定ヘッダーなどがサイトにある場合にはスクロール後の位置がヘッダーと被ってしまいます。それをずらして回避するために利用します。

説明は以上になりますが、javascriptを使用しなくても実装出来るのは簡単で非常に助かりますね。

javascriptを使用した方法ではアニメーションにもっとこだわったりとか、色々なことができるので状況によって使い分けても良さそうですね。

以上クリエイターズブログでした。