【CSS】スクロールに連動するアニメーション
2024.11.20 Posted by Coding_team
こんにちは、クリエイターブログです。今回はCSSのみでスクロールに連動するアニメーションについて紹介したいと思います。
はじめに
従来スクロールに連動するアニメーションを作る際は、javascriptとCSSの両方を用いていました。
ですが限定的ながらもCSSのみで作成することが可能となってきています。
Firefox、Safari（iOS Safariも）などの特定環境では現状使用できないですが、今後の対応に期待して紹介していきたいと思います。
まずは4つのアニメーションを作成してみましたのでDEMOをご確認くださいませ。順を追ってを説明していきます。
HTMLについて
HTMLの内容は以下になりますが、アニメーションさせたい個所にクラスを付与するだけなので特に語ることは無いかと思います。
ここでは .fadein .scale .slideup .to-rightが対応します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="block"> <img src="img/001.jpg" width="980" height="500" alt="" class="fadein"> </div> <div class="block"> <img src="img/002.jpg" width="980" height="500" alt="" class="scale"> </div> <div class="block"> <img src="img/003.jpg" width="980" height="500" alt="" class="slideup"> </div> <div class="block"> <img src="img/004.jpg" width="980" height="500" alt="" class="to-right"> </div> |
CSSについて
CSSの内容は以下となります。記述量としては従来のアニメーションの記述に数行加えるだけの形になります。
スクロールに連動するよう設定するのが animation-timeline と animation-range の各プロパティです。
各プロパティの詳細については後述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
.fadein { animation: fadein ease-in-out both; /* アニメーションの定義 */ animation-timeline: view(); /* アニメーションの進行を制御 */ animation-range: cover 0% 50%; /* タイムラインに沿ったアニメーションの適用範囲 */ } .scale { position: relative; animation: scale ease-out both; /* アニメーションの定義 */ animation-timeline: view(); /* アニメーションの進行を制御 */ animation-range: cover 0% 50%; /* タイムラインに沿ったアニメーションの適用範囲 */ } .slideup { position: relative; animation: slideup ease-out both; /* アニメーションの定義 */ animation-timeline: view(); /* アニメーションの進行を制御 */ animation-range: cover 0% 50%; /* タイムラインに沿ったアニメーションの適用範囲 */ } .to-right { position: relative; animation: to-right ease-out both; /* アニメーションの定義 */ animation-timeline: view(); /* アニメーションの進行を制御 */ animation-range: cover 0% 50%; /* タイムラインに沿ったアニメーションの適用範囲 */ } /* アニメーションを定義 */ @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes scale { from { transform: scale(.5); } to { transform: scale(1); } } @keyframes slideup { from { opacity: 0; bottom: -100px; } to { opacity: 1; bottom: 0px; } } @keyframes to-right { from { opacity: 0; left: -100px; } to { opacity: 1; left: 0px; } } |
animation-timeline プロパティ
このプロパティでアニメーションの進行を制御するのに使われるタイムラインを設定します。
詳細については以下の開発者向けドキュメントをご覧ください。
animation-timeline – CSS: カスケーディングスタイルシート | MDN
以下は対応環境となります。
“animation-timeline” | Can I use… Support tables for HTML5, CSS3, etc
ここで view() と設定することでスクロールして要素が見える場所に入ったらアニメーションが開始されて、見えなくなったらアニメーションが終了します。
他にも scroll() と設定するとページ全体のスクロール量に応じてアニメーションさせることも可能です。
animation-range プロパティ
このプロパティでアニメーションの適用範囲を設定します。つまりどこでアニメーションが始まり、どこで終わるかを設定することになります。
詳細については以下の開発者向けドキュメントをご覧ください。
animation-range – CSS: カスケーディングスタイルシート | MDN
以下は対応環境となります。
“animation-range” | Can I use… Support tables for HTML5, CSS3, etc
cover は最初に可視範囲に入り始めた時点（進行度 0%）から、完全にその範囲から離れた時点（進行度 100%）までとなるので、cover 0% 50% とするとその中間地点に設定することになります。
ここはドキュメントを見ても分かりづらいと思うので色々と触ってみるといいでしょう。
まとめ
animation-timeline と animation-range の各プロパティを用いることによってCSSのみで簡単にスクロールに連動したアニメーションを実現することが可能となりました。
早くFirefox、Safariでも実装されれば表現の幅が色々と広がるし、javascriptにも頼る必要が無くなってくるので使用する機会が多そうですね。
現状は特定環境は考慮しない場合のみにしか使えなさそうです。iOS Safariで使用できないのはやはり大きいです。
以上クリエイターブログでした。
関連記事こちらの記事も合わせてどうぞ。
