【CSS】スクロール駆動アニメーション

こんにちは、クリエイターブログです。今回はCSSだけで作れるスクロール駆動アニメーションを紹介したいと思います。

ページをスクロールしていくと画像や要素がふわっと浮かび上がってきたりエフェクトを付けたりするものです。

 

これまではJavaScriptやプラグインを使って実装するのが一般的でしたが、今回はなんとCSSだけで実装しています。

 

 

はじめに

良くあるスクロールに連動したエフェクトを3つほど用意しました。

大まかな仕様としては以下のようなものを想定しました。

 

• 要素が画面内に入ってきたらフェードインしながら表示
• 動きは「下から」「左から」「右から」の3パターンを用意
• JavaScriptは一切使わずCSSのみで実装

 

では実際に実装して解説していきます。

 

 

実装

DEMOを作成しましたのでまずは以下から動作確認をしてみてください。

→DEMOはこちら

 

html

まずはhtmlですが、アニメーションさせたい要素に用意したclassを付けるだけです。特に難しいことはないかと思います。

 

CSS

CSSではアニメーション部分を設定します。

ポイントとなるのは以下の2つのプロパティです。

 

animation-timeline: view();

通常のアニメーションは「時間」で進みますが、これを指定すると「要素が画面にどれだけ入ってきたか」でアニメーションが進むようになります。スクロールを戻すとアニメーションも巻き戻るのが特徴です。

 

animation-range: entry 0% cover 30%;

アニメーションの開始位置と終了位置を指定します。今回は「要素が画面に入り始めた瞬間（entry 0%）」に開始し、「要素が画面の30%ほど進んだところ（cover 30%）」で完了するようにしています。

 

@keyframes の中身はいつも通りのアニメーションの書き方なので、移動距離や透明度などは自由に変更できます。

実際の記述量としてはこれだけです。JavaScriptが得意でない方も簡単に実装できるかと思います。

 

 

注意点

非常に便利なスクロール駆動アニメーションですが、比較的新しい機能のためブラウザの対応状況には注意が必要です。

ChromeやEdgeは対応済みで、Safariも最近のバージョンで対応しましたが、Firefoxは執筆時点では標準では未対応となっています。最新の対応状況は以下で確認してください。

 

→Can I use – animation-timeline

 

未対応のブラウザでは animation-timeline が無視され、通常のアニメーションとして一瞬で再生されてしまいます。今回の場合は見た目上おかしくはなりませんが、気になる場合は @supports で対応ブラウザだけに適用しておくと安心です。

 

 

こうしておけば、未対応のブラウザでは最初から普通に表示されるだけになります。

また、OSの設定で「視差効果を減らす」をオンにしているユーザーもいるので、prefers-reduced-motion でアニメーションを止めてあげるのもおすすめです。

 

 

おわりに

今回はCSSだけで作れるスクロール駆動アニメーションを紹介しましたが、ここ近年CSSで出来ることが増えすぎて驚くことが多いです。

これまでJavaScriptで書いていた表現がCSSだけで実現できるようになると、読み込むファイルも減り、管理もしやすくなりますね。

→DEMOはこちら

 

ブラウザの対応状況には注意しつつ、まずは装飾的な演出から取り入れてみてはいかがでしょうか。

 

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