839文字
4分
編集

CSSのみで実装する指向性ヘッダーアニメーション

#CSS

JavaScriptによるスクロール位置の監視が必須であった複雑なヘッダーアニメーションも、Scroll State Queriesを使えばCSSのみで実装することが出来る。

#実装例

css
html {
  container-type: scroll-state;
}
header {
  transition: all 0.3s;
  @container scroll-state(scrollable: top) {
    position: sticky;
    inset: 0 0 auto;
    z-index: 1;
  }
  @container scroll-state(scrolled: bottom) {
    translate: 0 -100%;
  }
  @container scroll-state(scrolled: top) {
    translate: 0 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  @container not scroll-state(scrollable: top) {
    translate: 0 0;
    box-shadow: none;
  }
}
Header

Scroll content...

#CSS Scroll State Queries

実装にはCSS Scroll State Queriesを使用する。詳しくはUsing container scroll-state queries - CSS | MDNを参照。

ブラウザのサポート状況は次の通り。

#実装例の解説

まず、祖先要素にcontainer-type: scroll-state;を指定することで、ページ全体のスクロール状態をクエリできるようにする。例では、ルート要素に適用しているが、ヘッダーのラッパー要素に適用しても良い。

css
html {
  container-type: scroll-state;
}

下方向にスクロールしたときのアニメーションを@container scroll-state(scrolled: bottom)を使用して設定する。例では、スティッキーヘッダーに切り替わりつつ上にスライドアウトするようにしている。

css
header {
  transition: all 0.3s;
  @container scroll-state(scrolled: bottom) {
      position: sticky;
      inset: 0 0 auto;
      z-index: 1;
      translate: 0 -100%;
  }
}

上方向にスクロールしたときのアニメーションを@container scroll-state(scrolled: top)を使用して設定する。例では、影を付けてスライドインするようにしている。

また、@container not scroll-state(scrolled: none)を使用してスクロール発生後共通のスタイルを設定している。

css
header {
  transition: all 0.3s;
  @container not scroll-state(scrolled: none) {
      position: sticky;
      inset: 0 0 auto;
      z-index: 1;
  }
  @container scroll-state(scrolled: bottom) {
      translate: 0 -100%;
  }
  @container scroll-state(scrolled: top) {
      translate: 0 0;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}

これで指向性のあるヘッダーアニメーションを実装出来たが、この状態では次の問題がある。

  1. スクロールバーによる操作でscrolledが発火しないため、ヘッダーがスライドアウトした状態のままになり消失してしまう場合がある。
  2. 一度スクロールが発生すると、最上部に戻ってきてもヘッダーのスタイルが変わったままになる。例では影が付いたままになる。

これを制御するには次のようにscroll-state(scrollable: top)を利用して、上方向にスクロール可能かどうかを見れば良い。

まず、スクロールしたかどうかで共通のスタイルを設定するのは適切ではないため、scroll-state(scrollable: top)を利用して、上方向にスクロール可能状態かどうかで共通スタイルを適用するようにする。

また、not scroll-state(scrollable: top)を使用してスクロール可能状態ではない場合に、ヘッダーを通常のスタイルに戻すようにする。

これにより、ヘッダーの状態が操作方法に依らず復元可能になる。

css
header {
  transition: all 0.3s;
  @container scroll-state(scrollable: top) {
    position: sticky;
    inset: 0 0 auto;
    z-index: 1;
  }
  /* ... */
  @container not scroll-state(scrollable: top) {
    translate: 0 0;
    box-shadow: none;
  }
}
編集