Intersection Observer APIではパララックス（視差効果）は実装できない

ウインドウスクロールに応じて、何らかの演出をさせようと思った際には、Intersection Observer APIを利用した実装を検討すると良い。

Intersection Observerは「瞬間」しか扱わない

しかし、いわゆるパララックスと呼ばれる表現を実装しようと思ったら、Intersection Observer APIでは実装できない。
なぜならば、Intersection Observer APIでは、対象要素とビューポートの交差を監視しているだけで、交差する瞬間以外にはコールバック関数は実行されないからだ。もっともthresholdを細かく指定してやることによって、スクロールの変化を細かく追うことはできなくはないが、どこまでやるのかという問題が残る。

let options = {
  root: null,
  rootMargin: '0px',
  threshold: [0.00, 0.01, 0.02, ..., 0.99, 1.00]
}
let observer = new IntersectionObserver(callback, options);

パララックスではないものたち

ここでいうパララックスというのは、スクロールによって流れていく要素の速度に差をつける表現のことを指している。
物理世界で移動しながら景色を眺めると、近くの物体は視界を流れ去るが、遠くの物体はゆっくり動くという現象を観測できるが、それをウェブサイト上で再現して遠近感を出したりする表現方法のことだ。

ここで明確に区別しておきたいことがある。スクロールすることで要素がスクリーン上に入ったときに、フェードやスライドで出現させる表現は、パララックスではない。パララックスというのは「視差」であるのだから、このような表現手法は、パララックスとは関係がない。
では、何と言うべきか。あまり定まった呼称はないように思うが、「スクロールイン演出」とでも呼べばいいのではないだろうか。

なお、このスクロールイン演出を実装する上では、Intersection Observer APIはとても有効である。

どうやってパララックスを実装するか

パララックスを実装する上で不可欠なのは、現在のスクロール量を常に把握することである。究極的にはスクロール量が1px違えば、表示制御にそれを反映させなければならない。
であるがゆえに、特定の「瞬間」しか扱わないIntersection Observer APIでは、パララックスを十全に実現することはできない。

ではどうするか。結局とのところ、scrollイベントを監視するという伝統的な手法を使うしかないのである。

window.addEventListener('scroll', (event)=>{
  // これでなんとかする
  window.pageYOffset
});

ただ、scrollイベントはユーザーがスクロールするたびに発生しまくるわけで、パフォーマンスを低下させる恐れから、その使用は最小限に抑えたい。ゆえに、はじめてIntersection Observer APIについて知った時には、これでパララックスを実装できるのではないかと期待したものだ。
だが、よくよく考えると、Intersection Observer APIでは、パララックスは実現できない。というか、実現するのには向いてないのだ。原理的に。
ところが、巷では「Intersection Observer APIでパララックスを実装！」なる言説があふれている。そのほとんどが、単なるスクロールイン演出の意味で「パララックス」なる言葉を使っているのである。

私は言いたい。
パララックスでも何でもないものをパララックスと称するのを止めよ、と。

そして、私は問いたい。
パララックス実装のためには、結局のところscrollイベント監視をするしかないよね？
Intersection Observer APIではできないよね？
これについて、はっきり書いている記事を見かけないけど、私の認識間違ってないよね？
と。