スクロールフェードインの実装

ページをスクロールすると、要素が視差（パララックス）のようにふわっと表示される動きを見ることが多いですが、その実装方法も書き留めておきたいです。

HTMLは、スクロールフェードインをかけたい要素にfadeInというclass名をつけておくだけで大丈夫です。

CSS
jQuery

CSS

CSSの記述は以下です。

/*スクロール量が達していないときの、初期状態*/
.fadeIn{
    opacity: 0;　/*最初は見えないようにしておきます。*/
    transform : translate(0, 50px);  /*要素をY軸方向に50ピクセルだけ下に移動させます。初期位置が通常よりも少し下になることで、スクロール時に下から上にスライドインする動きが可能になります。*/
    transition : all 1500ms; /*アニメーションの速度と対象を指定します。1500ms（1.5秒）の間で、すべてのスタイルの変化がゆっくりと実行されるように設定されています。allを指定することで、opacityとtransformの両方の変化にアニメーションが適用されます。*/
}

/*スクロール量が達したときの状態*/
.fadeIn.scrollIn{
    opacity: 1;
    transform: translate(0, 0); /*要素を元の位置に戻します。*/
}

jQuery

$(function () {

    //start
    $(window).scroll(function (){    //ウィンドウのスクロールイベントを設定しています。ページがスクロールされるたびに、内部の処理（関数）が実行されます。
        $('.fadeIn').each(function(){ //.fadeInクラスを持つ全ての要素を対象に、ループ処理を行います。それぞれの要素について、以下の処理が実行されます。
            var elemPos = $(this).offset().top,   //windowHeightの上端からfadeIn(現在処理している要素の位置=ページ上部からの距離）を取得し、elemPosという変数に格納します。⇒つまり、fadeInという名前がついた要素が画面の上端からどの位置にいるかの情報を取得しているということです。
                scroll = $(window).scrollTop(), //現在のスクロール量・位置（ページ上部からの距離）を取得し、scrollという変数に格納します。
                windowHeight = $(window).height(); 　//ウィンドウの高さを取得します。
              　if (scroll > elemPos - windowHeight + 100){  //スクロール位置が要素の表示位置に達したかどうかをチェックしています。達してから処理を始めては遅いので、達する少し前（100のマージン）に始めます。
                  $(this).addClass('scrollIn');  //条件を満たしたら、scrollInというclassを付加します。
                }
            });
        });
    //finish

});

これは、間違いなくスクロール量などの理屈がわかりにくいので、図示しておきます。

＋100の部分は少しあいまいですが（画面の下から100なのか、上から100なのか）、ご容赦ください。