縦長サイトはスクロール量が大変多い。目的のエリアに到達するまでに相当量スクロールしなければならないサイトもあるほどだ。ユーザーにとっては、わずらわしく非常にストレスのかかる行動であることは間違いない。

スクロールしていると退屈で通り過ぎてしまう、なんてこともあるだろう。リズミカルにスクロールしだすと止まらないものだ。これはサイトオーナーにとっては、もっとも回避しなければならないし、ましてや正しい情報が認知されずサイト離脱など阻止しなければならない。ユーザーとオーナーの双方にとって損害といえる。

縦長サイトでスクロールさせること自体に問題はなく、成功しているサイトだって少なくないが、退屈させるのがいけないのだ。そんなスクロール時の退屈の方策に、アニメーションエフェクトを加えて飽きさせないものがある。

このエントリーでは、スクロール時の表示領域の侵入をトリガーにしてフェードインするテクニックを紹介したい。

はじめに

まず表示領域というものに言及しておこう。ここでいう表示領域は、いわゆるビューポートのことで、現在あなたがブラウザ内に視える領域のことを指す。スクロールしないと視えない領域はビューポート外ということだ。

この表示領域に侵入したか否かを判定するアイデアとして、スクロールをトリガーにして、ターゲット要素がwindowオブジェクトの下辺を超えたら処理するというものがある。あなたも目にしたことがあるのではないだろうか。

しかしこの手法だと、イベントコール後もイベントリスナを削除しない限り、ずっとスクロールイベントが発生することになる。パフォーマンスとしていかがなものか。

そこでこのような要件に最適なIntersectionObserver APIを使う。

IntersectionObserver APIについて

IntersectionObserver APIとは、ターゲット要素が表示領域と交差するたび実行されるというものだ。交差というのは、表示領域の一辺にターゲット要素の一辺が被ったか否かということで、一般的にスクロールすれば表示領域の下辺とターゲット要素の上辺が交差することになる。もちろん全面的に重なった状態も交差に該当する。

すなわち、windowオブジェクトの下辺を超えたら処理するなどの実装において、もっとも優れた代替案になるだろう。

IntersectionObserver APIの詳解はMDNで確認してもらいたい。

表示領域の侵入したらフェードインするデモンストレーション

まとめ

表示領域の侵入を判定してフェードインするテクニックの紹介だった。

スクロールイベントが悪いわけもなく、パララックスサイトのような実装において、スクロール量を求める場合もある。ときと場合と要件で判断してもらうとよいだろう。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。