CSSの新機能×バリアブルフォント

2023年10月24日 22:38

このnoteで紹介するのは "Scroll-driven Animations" と呼ばれる新機能です。2023年7月リリースのGoogle Chrome 115に搭載されました。JavaScroptを用いずに，CSS数行でスクロール駆動アニメーションを実装できるようになります。

CSS初心者でもかなり簡単に実装できた
バリアブルフォントとの相性が良かった

ので，簡単なWebページを作ってみました。その解説？が主な内容となります。

注意
現段階では，Scroll-driven Animationsに対応しているブラウザは限定されていますので，実験段階に留める必要があります。
　対応済：Chrome (PC･Android), Edge (PC), Opera (PC) など
　未対応：Safari (PC･iOS) など
（2023/10/17現在）
ただし既にポリフィルがリリースされているので，これを用いるとSafari等で擬似的に再現することができます。

https://caniuse.com/?search=animation-timeline

Scroll-driven Animationsについて

今までCSSで実装できるアニメーションは，時間に依存するものに限られていました。今回のアップデートは，その依存先に「スクロール進捗度 (Scroll Progress) 」と「ディスプレイ上の相対位置 (View Progress) 」が加わったというものです。

スクロール進捗度 (Scroll Progress)

これは「ページ全体（または特定の子要素）をスクロールした割合」をタイムラインに置くものです。以下を "Run Pen" より試してみてください。（アプリの場合はブラウザに飛ばされるのでご注意を）

スクロールに従って，ボックスの色・サイズ・角度が連続的に変化していると思います。これは以下のようなCSSで実装されます。

@keyframes box-progress {
  from {
    scale: 1 1;
    transform:rotate(0deg);
  }
  to {
    scale: 2 2;
    transform:rotate(180deg);
  }
}

.box {
  animation: box-progress linear;
  animation-timeline: scroll();

2~5行目の "from" (or "0%") でスクロール0%の状態を，6~9行目の "to" (or "100%") で100%の状態を定めます。中間は補完され，連続的に変化します（バリアブルフォントの概念に通ずる部分がある）。また，例えばその間に "50%" の状態を定義すれば，2段階の変化をします。以上は従来のアニメーションにも共通することではありますが，かなり設計しやすいです。

そして，このアニメーションを適用する要素に13, 14行目を入れます。
14行目でタイムラインにスクロール進捗度を設定しています。

ディスプレイ上の相対位置 (View Progress)

こちらは，「実際に表示されている位置」をタイムラインとするものです。

すなわち上のデモのように，要素が画面内に入ってきたときにのみ動くようにできます。前半はほぼ同じで後半は以下のようになります。

.box {
  animation: scroll-progress linear;
  animation-timeline: view();
  animation-range: entry 0% exit 150%;

Scroll-driven Animationsの詳細に関しましては，以下のリンクをご参照ください。

バリアブルフォントをアニメーションにしてみた

早速ですが，今回制作したページです。
（ポリフィルを適用しているので，遷移は少しぎこちないですがSafari等でも動くと思います）

また以下がほぼ同じものとなりますので，ぜひ見てみてください！

テキストはクリックして編集できます！

スクロールに連動してフォントのウエイトが変化するアニメーションです。
今回は，Noto Sans JP, M PLUS 1, Jost, Bodoni Modaの4つのバリアブルフォントをGoogle Fontsから読み込んでみました。このうち前の2つは和文フォントです。このようなアニメーションはJavaScriptを利用しても制作できますが，簡単な記述で実装できるという点で，Scroll-driven Animationsには魅力があると思います。

ポリフィル
古いブラウザーで、その機能を使えるようにするためのJavaScriptです。今回は、例えば
<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
を入れておけば十分ですが、期待通りに動くとは限りません。
（このページのCodePenにも適用しています）

https://github.com/flackr/scroll-timeline

バリアブルフォント
100, 101, 102, … 900というように（事実上）無段階にウエイト等を調節できるフォントのことです。技術的には，Light, Regular, Medium, …といった段階的ウエイトの中間値を補完することで実現しています。また，ウエイト以外に幅や傾きなどの要素を調節できるフォントも登場しています。

コードについて

@keyframes noto-animation {
  from {
    font-size: 15vw;
    font-variation-settings: "wght" 100;
  }
  to {
    font-size: 16vw;
    font-variation-settings: "wght" 900;
  }
}

"@keyframes" は，上のようなコードとなっています（ "from" は明示的に書いています）。ここで，"font-variation-settings" は，"wght"（ウエイト）に限らず， "wdth", "opsz", "slnt" など，バリアブルフォントの様々な "axis"（軸）を設定できます（フォントによりけりです）。

なお，Google Fontsで利用できる軸の定義および各フォントが対応している軸は，以下の公式ページに記載があります。

ここには数十種類の軸の説明がありますが，単一のファミリーに限定すると，Roboto Flexの11つが最高だとは思います。

Google Fontsの利用について

個人的に一番躓いたのがGoogle Fontsの利用方法だったので，最後に備忘録として書いておきます。。

Google FontsのAPIはv2に更新され，これにより初めてバリアブルフォントをWebフォントとして完全に利用することができるようになりました：

<!-- Roboto Flexを読み込む場合(ウエイト:400がデフォルト) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Flex">

<!-- Roboto FlexとNoto Sans Japanese（../css? 以下）-->
family=Roboto+Flex&family=Noto+Sans+JP

<!-- Jost ウエイト:123 -->
family=Jost:wght@123

<!-- Jost ウエイト:123,456 -->
family=Jost:wght@123;456

<!-- Jost ウエイト:300~700 -->
family=Jost:wght@300..700

<!-- Jost 斜体のウエイト:300~700 -->
family=Jost:ital,wght@1,300..700
<!-- 0(立体),1(斜体)の2択 -->

<!-- Jost 立体のウエイト300~700と斜体のウエイト456 -->
family=Jost:ital,wght@0,300..700;1,456

<!-- Bodoni Moda オプティカルサイズ6~96とウエイト400~900の組合せ -->
family=Bodoni+Moda:opsz,wght@6..96,400..900
<!-- axis(軸)はアルファベット順に記述 -->

<!-- Bodoni Moda テキスト"Hello"のみの読み込みでウエイト:456 -->
family=Bodoni+Moda:wght@456&text=Hello

おわりに

ここまで読んでくださりありがとうございます。今でこそバリアブルフォントのアニメーションがWebに用いられることは殆どないですが，今後表現手段の一つとして広まっていくのかな？と思っています。

（「スクロール進捗度 (Scroll Progress) 」「ディスプレイ上の相対位置 (View Progress) 」は公式の和訳ではありません）