スクロールでふわっと表示（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でアニメーションさせたりすることもできますので、
ぜひトライしてみてくださいね！
