Intersection Observerを使ったスクロール連動マーカーのDEMOページ

スクロール連動マーカーのDEMOページです。

スクロールして対象の要素が画面に入ると、マーカーが引かれます。

  • 画面に入ると1度だけ発火するマーカー
  • 画面に出入りするたびに何度も発火するマーカー

2種類を用意してますので、ぜひご確認ください。

↓↓↓下にスクロールしてください↓↓↓

1度だけ発火するスクロール連動マーカー

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

スクロール連動マーカー実装デモテキストです。画面に入ると1度だけマーカーが引かれます。スクロール連動マーカー実装デモテキストです。画面に入ると1度だけマーカーが引かれます。スクロール連動マーカー実装デモテキストです。画面に入ると1度だけマーカーが引かれます。

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

スクロール連動マーカー実装デモテキストです。画面に入ると1度だけマーカーが引かれます。スクロール連動マーカー実装デモテキストです。画面に入ると1度だけマーカーが引かれます。スクロール連動マーカー実装デモテキストです。画面に入ると1度だけマーカーが引かれます。

画面に出入りするたびに何度も発火するスクロール連動マーカー

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

スクロール連動マーカー実装デモテキストです。画面に出入りするたびにマーカーが引かれます。スクロール連動マーカー実装デモテキストです。画面に出入りするたびにマーカーが引かれます。スクロール連動マーカー実装デモテキストです。画面に出入りするたびにマーカーが引かれます。

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

スクロール連動マーカー実装デモテキストです。画面に出入りするたびにマーカーが引かれます。スクロール連動マーカー実装デモテキストです。画面に出入りするたびにマーカーが引かれます。スクロール連動マーカー実装デモテキストです。画面に出入りするたびにマーカーが引かれます。

サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。

一度上までスクロールして、再度ここまでスクロールしてみてください。

上の2つは1度きりマーカーが引かれるだけなのに対して、下の2つは画面外に出るたびにリセットされ何度でもマーカーが引かれます。