【jQuery】スクロールで要素がフェードインされるようにする方法
jQueryを用いて、特定の位置までスクロールすることで非表示だった画像や記事などをふわっと表示される（フェードインされる）ようにする方法について記載していきます。
使われるケース
ページにリッチ感を出したいときや、特定の記事および画像を目立たせたいときに使用されます。
サンプル
方法
jQueryを使って実装していきます。
※jQueryを使うための準備については、下記よりご確認ください。
基本的な考え方
まずシンプルなコードで基本的な考え方を説明します。
スクロールによりフェードインしたい要素を下記のようにHTMLにdivタグで記載しとします。
<div class="hide">
<p>ふわっと</p>
</div>要素には「hide」というクラスを入れています。
そしてCSSでは下記のように記述します。
※当機能に関係のないデザイン部分は省略しています。
.hide{
opacity: 0;
transition: opacity 1s;
}opacity:0
この記述で、初期状態で要素を透明にしています。
transition: opacity 1s;
こちらは「opacity」の値が変更される際に1秒使ってアニメーションするという内容になります。
1sの部分は適宜変更してください。
そしてjQueryの記述は下記のようになります。
//ウィンドウをスクロールさせたときに
$(window).scroll(function() {
//要素「hide」のTOPの縦位置を「hTop」とする
var hTop = $('hide').offset().top;
//要素「hide」の高さを「hHeight」とする
var hHeight = $('hide').height();
//要素「hide」のbottomの縦位置（TOPの縦位置+高さ）を「hBottom」とする
var hBottom = hTop + hHeight;
//ウィンドウ表示領域のTOPの縦位置を「wTop」とする
var wTop = $(window).scrollTop();
//ウィンドウ表示領域の高さを「wHeight」とする
var wHeight = $(window).height();
//ウィンドウ表示領域のbottomの縦位置（TOPの縦位置+高さ）を「wBottom」とする
var wBottom = wTop + wHeight;
//要素「hide」が完全にウィンドウ表示領域の内側に位置したら
if (hBottom <= wBottom) {
//要素「hide」の透明度を下げる
$('hide').css('opacity', '1');
}
});要素とウィンドウの座標や高さを取得してフェードインさせる位置の条件をif文にして、条件を満たした場合に表示させる内容となります。
上記は要素「hide」が完全にウィンドウ表示領域の内側に位置したら表示させる内容となりますが、例えば条件を
if (hTop + 100 <= wBottom)
に変更すると、要素「hide」がウィンドウ表示領域より100px 内側に位置したら 表示させる内容になり、
if (hTop + hHeight/2 <= wBottom)
に変更すると、要素「hide」の半分が表示領域の 内側に位置したら 表示される内容になります。
臨機応変に変更が可能です。
浮き上がらせたい要素が複数ある場合
ページ内でこの機能を使う場合、大抵は複数の浮き上がらせたい要素があるかと思われます。
ただ、要素全てに「hide」のクラスを付けるだけでは、上に位置しており最初の「hide」が表示されたタイミングで全ての「hide」が表示されてしまいます。
そこで、
$('.hide’).each(function() {~
を使って記述をまとめます。
$(window).scroll(function() {
//それぞれの「hide」要素ごとに下記処理を行う
$('.hide').each(function() {
var hTop = $(this).offset().top;
var hHeight = $(this).height();
var hBottom = hTop + hHeight;
var wTop = $(window).scrollTop();
var wHeight = $(window).height();
var wBottom = wTop + wHeight;
if (hBottom <= wBottom) {
$(this).css('opacity', '1');
}
});
});このように記述することで、それぞれの「hide」ごとに、ウィンドウ表示領域の内側に位置したらフェードインされます。
同じ高さの複数の要素を、時間差で表示させる場合
同じ高さの複数の要素を時間差で表示させてウェーブのようにする場合は、クラスを分けて管理します。
.hide2{
opacity: 0;
transition: opacity 1s;
transition-delay: 0.5s;
}遅れて浮き上がらせる要素に「hide2」のクラスをつけ、
transition-delay: 0.5s
で0.5秒後にアニメーションさせるという処理を追加します。
※0.5sは適宜変更してください。
jQueryのセレクタにも、hide2を追加します。
$(window).scroll(function() {
$('.hide,hide2').each(function() {
var hTop = $(this).offset().top;
var hHeight = $(this).height();
var hBottom = hTop + hHeight;
var wTop = $(window).scrollTop();
var wHeight = $(window).height();
var wBottom = wTop + wHeight;
if (hBottom <= wBottom) {
$(this).css('opacity', '1');
}
});
});こちらで完成です。
リロード時にページTOPに戻る処理
スクロールすることで非表示だった要素をふフェードインさせる機能を実装したページでは、アニメーションを効果的に見せるために多くの場合で「リロード時にページTOPに戻る処理」が入っています。
jQueryで下記コードを追加することで対応できます。
$('html,body').animate({
scrollTop: 0
}, function() {
$('.hide,.hide2').css("opacity", "0");
});リロード時にページTOPに戻り、アニメーションする要素を非表示にするという内容です。
以上となります。