【まえがき】 ※私は勉強のために敢えて自分でやりましたが、普通に実装したいだけなら ScrollReveal.jsというライブラリを使えば一瞬でできます。
画面をスクロールしたら要素がふわっと現れるアニメーションを、ライブラリを使わず素のJavaScriptだけで実装してみました。
See the Pen スクロールフェードイン by toshihide (@toshihide2000) on CodePen.
この動きを分解すると、
①要素が画面内に現れたら
②フェードインのアニメーションを付与する
というものです。至ってシンプルですが、「①要素が画面内に現れたら」をどうやって判定するかが今回のキモです。
考え方はいろいろあると思いますが、私は「要素が画面内に出現＝スクロール量＞(ページ上端から要素までの距離ーviewportの高さ)」であると考えました。
この例だと、201px以上スクロールしたら要素が画面内に入ってくることになります。
つまり、"スクロール量＞(ページ上端から要素までの距離ーviewportの高さ)"がtrueであればアニメーションを付けるという動きを、スクロールするごとに判定させれば良さそうです。
ページ上端から要素までの距離
getBoundingClientRect()でviewport上端から要素までの距離を取得できます。これにスクロール量を足すことでページ上端から要素までの距離を割り出すことができます。
まとめると、
スクロール量＝window.pageYOffset;
viewport上端から要素までの距離＝getBoundingClientRect().top;
ページ上端から要素までの距離=getBoundingClientRect().top+window.pageYOffset
viewportの高さ=window.innerHeight;
という具合になります。
あとはこれらをif式に当てはめてアニメーションのクラスを付与すれば良いのですが、一つ注意すべき点があります。スクロールした後にリロードするとpageYOffsetがリロード時の値を返すので、リロードすると最初からアニメーションがついた状態で読み込まれてしまいます。
なので、苦肉の策ですがwindowのonload時にアニメーションのクラスを外しておく必要があります。
また、フェードインのアニメーションが「透明度を１に近づけながら下から上に移動する」というものなので、要素が画面内に入ってすぐにアニメーションを当ててもアニメーションの特性上、浮き上がってくる動きがちゃんと見えない場合があります。そのため判定の基準をスクロール量＞ページ上端から要素までの距離ーviewportの高さ+viewportの1/4の高さとし、きちんとアニメーションが見えるように余裕を持たせています。
以上、スクロールフェードインアニメーションの実装方法についてでした。
趣味でアプリを作っています。見て行ってくれると喜びます。
