💁‍♂️

シンプルなスクロールで発火するJavaScriptライブラリを開発しました

2022/12/13に公開

CSS

GSAPライクな発火の位置指定ができるシンプルなスクロール発火ライブラリSimple Scroll Triggerを作りました。

▼動作の様子

画面上のポイントと要素のポイントを指定して発火位置を制御できます。具体的には「画面下10%のところに要素の上端がきたら、発火」というような位置指定ができます。始点・終点の指定ができるので、入ったとき（onEnter）・出たとき（onLeave）のほか、戻り去ったとき（onLeaveBack）・出戻った（onEnterBack）ときの4つ発火点を設定できます。

MITライセンスなのでご自由にお使いください。

使い方

// トリガーとする領域の要素
const triggerElement = document.querySelector(".trigger");

new SimpleScrollTrigger({
  // トリガー要素。必須。
  trigger: triggerElement,
  // 指定した開始位置に開始判定が上から下へ入ったときに呼ばれる関数。省略可。
  onEnter: () => {
    console.log("onEnter");
  },
  // 指定した開始位置に開始判定が下から上へ出たときに呼ばれる関数。省略可。
  onLeaveBack: () => {
    console.log("onLeaveBack");
  },
  // 指定した終了位置に終了判定が上から下へ出たときに呼ばれる関数。省略可。
  onLeave: () => {
    console.log("onLeave");
  },
  // 指定した終了位置に終了判定が下から上へ入ったときに呼ばれる関数。省略可。
  onEnterBack: () => {
    console.log("onEnterBack");
  },
  // 開始判定する画面上端からの位置。単位は%もしくはpx。100%とした場合は、画面下端が判定位置です。省略した場合は画面上端。
  startViewPortPoint: { value: 100, unit: "%" },
  // 開始位置の要素上端からの位置。単位は%もしくはpx。50pxとした場合は要素上端から50pxの位置に開始判定がくると発火します。省略した場合は要素上端。
  startTriggerPoint: { value: 50, unit: "px" },
  // 終了判定する画面上端からの位置。単位は%もしくはpx。0%とした場合は、画面上端が判定位置です。省略した場合は画面上端。endTriggerPointと両方省略した場合はend判定は設定されません。  
  endViewPortPoint: { value: 0, unit: "%" },
  // 終了位置の要素上端からの位置。単位は%もしくはpx。100%とした場合は要素下端の位置に終了判定がくると発火します省略可。省略した場合は要素上端。endViewPortPointと両方省略した場合はend判定は設定されません。 
  endTriggerPoint: { value: 100, unit: "%" },
});

トリガーとしたい要素と画面と要素の交差点の設定、コールバック関数を渡すことで設定できます。SimpleScrollTrigger内部にリサイズ時の判定位置をアップデートする処理が含まれているので、実装者側で特にケアする必要もありません。

終了位置の指定は任意です。未指定の場合にはonLeaveおよびonEnterBack関数は呼ばれません。

画面位置の設定と要素内の位置の設定はやや慣れないかもしれませんが、GSAPのScrollTriggerと同じような設定方法です。GSAPは文字列指定にてまとめてstart・end位置を文字列で指定できますが、シンプルさをコンセプトとしているので、個別に指定します。指定は割合の%もしくはpx指定ができます。現状はstart/endいずれも上部からのみの指定ですが、アップデートで下部からの指定もできるようにする予定です。なお、上記例ではオブジェクト型で値と単位を渡していますが、数値型で渡すとpx指定になります。startViewPortPoint: 100としたら画面上部100pxが判定位置です。

内部的なお話

ソースコードを見てもらえば分かりますが、実態としてはIntersection Observer APIをよしなにつくるクラスです。scrollイベントではなく、Intersection Observerを用いているのでスクロールのたびに呼ばれず動作が軽量です。

今後の予定

先程の下部からの指定のアップデートを予定していると書きましたが、ほかにも下記機能をアップデート予定です。

デバッグ用表示機能（冒頭GIFのような開始位置を目視できる機能）
onceフラグ（1度しかコールバックを呼ばない）
GSAP ScrollTriggerでいうところのscrub機能？（スクロールに応じた進捗）

3つ目のscrub機能はIntersection Observerだけでうまく作れるか分からないので実装するかどうか分かりません。（精度を犠牲にすればできそうな雰囲気もしている）

さいごに

もし不具合などを見つけましたらissue報告していただけると助かります。GitHubにスターをつけてもらえると励みになります。

どうぞよろしくお願いします。

使い方

内部的なお話

今後の予定

さいごに

Discussion