今更ながら、スクロール連動でフェードインさせてみる

JavaScript

kouraku

2019.05.22

Oculus Questを購入し、24日の到着を待ちわびている kouraku です。おはこんばんちわ。

さてさて今回は、スクロール連動で要素を下から上にふわっとフェードインさせる機能を作ってみたいと思います。

まずはポイントを確認

スクロール連動で押さえておくポイントは以下３点です。

スクロール値　→ $(window).scrollTop
連動対象となる要素の位置　→ $('要素').offset().top
画面の高さ　→ $(window).height()

あとは、画面のどのくらいの位置に入ったらフェードインさせるかも考えておくと良いと思います。
これらのポイントを踏まえて、

$(window).on('scroll') のタイミングで、
スクロール値と要素の位置を比較し、
一定の条件に適合した場合クラスを付与する

といった一連の処理をつくることができれば完成しそうですね。では、スクロール値と要素の位置を比較する条件とはどのようなものでしょうか？

比較条件を考える

スクロールしたときに、画面内に要素が入ってきた、ということがどのような状態であるかを絵にしてみました。

【絵①】

この絵の状態を、そのままif文に置き換えてみます。

if (スクロールトップ値が1000pxのとき >= 要素の位置は1400px) {
 要素にクラスを付与する;
}

スクロールトップの値は1000だけど、要素の位置が1400・・・さて、どうすればこのif文は成立するでしょうか。ここでポイントとなるのが、$(window).height()の使い方ですね。
次の絵の様に考えてみます。

【絵②】

これはどういうことかというと、画面の高さ500px分を要素の位置から引いている状態です。
すると、1400px - 500px = 900pxとなります。
よって、スクロールトップ値1000pxは要素の位置900px以上の状態となり、これで条件が整いました。

あとは、まだ要素が上に飛び出している状態となっていますので、
飛び出ている100px（絵①画面下部:1500px - 絵①要素の位置:1400px）を要素の位置に足すと1000pxとなり、より絵①のイメージに近い条件が出来上がります。

では、出来上がった条件を汎用的な感じのコードに書き換えてみます。

$(window).on('scroll', function() {
  if ($(window).scrollTop() >= $(要素).offset().top - $(window).height() + 100) {
    $(要素).addClass('fade');
  }
});

スクロールに連動してフェードインさせるための基本的な処理はこんな感じでしょうか。

実装してみる

要素の表示させるタイミングについては、ユーザーの見ている画角にも寄ったりしますので、比率で設定することもあります。この場合は、
$(要素).offset().top - $(window).height() + 100
を $(要素).offset().top - $(window).height() * 比率 とすれば可能です。

また、できれば同じクラスを使うことで、スクロール連動させたいところです。
（ページリロードなんかも想定して）下から上にスクロールしたケースもカバーできれば尚良しです。

この辺りを踏まえてサンプルを作ってみたのが以下になります。

フェードイン前にtransformで位置をずらしているため、その辺りも考慮させて処理を追加しています。
（ちなみに、初期処理として一回強制的にfade判定処理を実行しています）