スクロールでふわっと表示（jQuery + CSS）

1. スクロールの量を取得する（「scrollTop()」を使用）

こちらタイトルの通りの処理なのですが、jQueryで用意されている
便利���メソッドのscrollTop()を利用して、
今、どれくらいスクロールしたかを取得します。
また、スクロールごとに処理をさせるために、
同じくjQueryのon()メソッドを使って、
スクロールが行われるごとに発生するscrollイベントに
紐付けて処理を行わせます。

JS

$(function(){
// スクロールごとに処理をさせる
$(window).on('scroll',function(){
// スクロール毎の処理
// スクロール量を取得
var scroll_top = $(window).scrollTop();
});
});

2. 要素のドキュメント上の位置を取得する（「offset()」を使用）

次に目的の要素ののドキュメント上の位置を取得します。
目的の要素には任意のクラスには（今回は「effect」）を付与し、
jQueryのメソッドoffset()を利用して、
ドキュメント上の位置を取得します。

HTML

<div class="effect">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、
</div>
<div class="effect">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、
</div>
<div class="effect">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、
</div>
<div class="effect">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、
</div>

CSS

div {
width : 400px;
height : 400px;
margin-bottom: 50px;
}
div:nth-of-type(2n) {
color: #FFFFFF;
background-color:#2D579A;
}

JS

$(function(){
// スクロールごとに処理をさせる
$(window).on('scroll',function(){
// スクロール毎の処理
// スクロール量を取得
var scroll_top = $(window).scrollTop();
// eachを利用して「effect」クラスの要素それぞれに処理を行なう
$('.effect').each(function(){
// 要素のドキュメント上の位置を取得
var offset_top = $(this).offset().top ;
});
});
});

3. 1と2の値を比較して画面に入ったかどうかを判定する

最後に取得した２つの値を比較して、画面上に要素が入ったかどうかを判定します。
今回は画面上に登場した要素に対して「fadein」というクラスを付与し、
CSSのtransitionを使ってアニメーションを実装します。
また、画面上端ででアニメーションを開始するというパターンは少ないかと思いますので、
比較の際にスクロール量に対してのマージンを設けています。
最後の例はcodepenで、
※　HTMLは同じです。それぞれの要素にはアニメーションをわかりやすくするために色をつけています。

See the Pen スクロールしてフレームインした時にフェードインなどさせたい場合の処理（jQuery） by Shinji Yamamoto (@commono_yamamoto) on CodePen.

今回はCSSのクラスのつけはずしでアニメーションを行いましたが、
要素ごとに同じクラスで別の動きをさせたり、
jQueryでアニメーションさせたりすることもできますので、
ぜひトライしてみてくださいね！