スクロールアニメーションを作る時に必要になる、スクロール量を求める方法
はじめに
この記事は、スクロールアニメーションを作る時に必要になる、スクロール量を求める方法を図を用いて伝える記事です。
今回は、スクロールしたら画像がふわっと表示されるアニメーションを作る時を想定します。
アニメーションさせたい要素が画面下部から少しだけ見えてきた時のスクロール量を求めればよい
スクロールしたら画像がふわっと表示されるアニメーションを作るために必要なことの1つは、アニメーションさせたい要素が画面下部から少しだけ見えてきた時のスクロール量を求めることです。
アニメーションさせたい要素が画面下部から少しだけ見えてきた時を図に表してみます。
画面下部からアニメーションさせたい画像が少しだけ見えています。これくらい見えてきたら画像をふわっと表示させる処理を走らせる想定です。
それは図のオレンジの矢印の長さになった時、つまりオレンジの矢印の分だけスクロールした時に画像をふわっと表示させるということです。
なので、画像が少し見えてきた時のスクロール量を求めれば良いことになります。
画像の位置が画面下部ピッタリの時を考えてみる
ただ、いきなりアニメーションさせたい要素が画面下部から少しだけ見えてきた時のスクロール量を求めようとするとわかりづらくなるので、よりシンプルな状況を考えてみます。
画面下部から少しだけ見えてきた時ではなく、画像の位置が画面下部ピッタリの時です。
こちらも図で表してみます。
画面下部ピッタリに画像があります。この時に画像をふわっと表示させる処理を走らせたいとします。
それも同様に、図のオレンジの矢印の長さになった時、つまりオレンジの矢印の分だけスクロールした時に画像をふわっと表示させるということです。
なので、画面下部ピッタリに画像がある時のスクロール量を求めれば良いことになります。
スクロール量を求めるには、ページの一番上から要素までの長さを取得し、そこから画面の高さを引けばいい
図にページの一番上から要素までの長さと画面の高さを表す矢印を追加しました。
スクロール量を求めるには、ページの一番上から要素までの長さから画面の高さを引けばいいことがわかります。
少しだけ見せたい分を足せば、「アニメーションさせたい要素が画面下部から少しだけ見えてきた時」のスクロール量になる
シンプルな状況である、画像の位置が画面下部ピッタリの時のスクロール量の求め方を理解した上で、最終的に求めたかった、アニメーションさせたい要素が画面下部から少しだけ見えてきた時のスクロール量を求めてみます。
こちらも図で表してみます。左側の図は画像が画面下部ピッタリの時、右側の図は画像が画面下部から少しだけ見えてきた時を表しています。
2つの状況を比較すると、画面下部から少しだけ見せる時は、画面下部ピッタリの時に比べて、赤い矢印分だけ追加でスクロールする必要があることがわかります。
そして、追加するスクロール量というのは、画面下部から少しだけ見せたい分と同じ値になります。
つまり、アニメーションさせたい要素が画面下部から少しだけ見えてきた時のスクロール量を求めるには、画像が画面下部ピッタリの時のスクロール量に対して、画像を画面下部から少しだけ見せたい分だけスクロール量を追加すればいいことがわかります。
スクロール量を求める計算式をJavaScript（jQuery）で考えてみる
最後に、JavaScript（jQuery）ではどのような計算式になるかを考えてみます。
計算に必要な要素を整理すると、
- スクロール量
- 画面の一番上からアニメーションさせたい要素までの長さ
- 画面の高さ
- 画像を画面下部から少しだけ見せたい分（追加するスクロール量）
があります。
では、JavaScript（jQuery）ではそれぞれの要素をどのように取得することができるでしょうか。
スクロール量
スクロール量は、以下の処理で取得することができます。
$(window).scrollTop();
参考記事はこちら。
画面の一番上からアニメーションさせたい要素までの長さ
画面の一番上からアニメーションさせたい要素までの長さは、以下の処理で取得することができます。
$(”.アニメーションさせたい要素のクラス名”).offset().top;
参考記事はこちら。
画面の高さ
画面の高さは、以下の処理で取得することができます。
$(window).height();
参考記事はこちら。
画像を画面下部から少しだけ見せたい分の値（追加するスクロール量）
画像を画面下部から少しだけ見せたい分（追加するスクロール量）の取得にJavaScript（jQuery）は不要です。単純に手動で足すだけです。
+ 数値
それぞれの要素を組み合わせたスクロール量を求める計算式
日本語で書くと以下のようになります。
スクロール量 = 画面の一番上からアニメーションさせたい要素までの長さ - 画面の高さ + 画像を画面下部から少しだけ見せたい分の値（追加するスクロール量）
実際にはスクロール量は、画面の一番上からアニメーションさせたい要素までの長さから画面の高さを引いた値よりも大きければよいので、= を > に置き換えておきます。
スクロール量 > 画面の一番上からアニメーションさせたい要素までの長さ - 画面の高さ + 画像を画面下部から少しだけ見せたい分の値（追加するスクロール量）
JavaScript（jQuery）に置き換えてみます。
$(window).scrollTop() > $(”.アニメーションさせたい要素のクラス名”).offset().top - $(window).height() + 数値;
これで、JavaScript（jQuery）でスクロール量を計算することができます。
おそらく、この計算式をif文の条件式として使い、trueの時にアニメーションさせる処理を書くことになると思います。
アニメーションさせる処理については、この記事では割愛します。
参考になりそうと思った記事は例えばこちらです。
まとめ
この記事の内容を頭に入れておけば、きっとスクロールアニメーションに関するいろんな記事が理解しやすくなっていると思います。
ここまで読んでくれた方がこの記事を応用して、実装したいスクロールアニメーションを作ることができたら嬉しいです。
Discussion